npm 包 ember-singularity-mixins-efarina 使用教程

在 Ember.js 前端开发过程中,我们常常需要进行布局和样式的调整,而实现这些功能的常用方案之一是使用 CSS 框架和 mixin。ember-singularity-mixins-efarina 是一个基于 Singularity Grid System 的 mixin 插件,可以在 Ember.js 的项目中快速实现自适应布局的需求。

安装

使用 npm 安装 ember-singularity-mixins-efarina。

--- ------- -------------------------------- ----------

app/styles/app.scss 文件中引入插件:

------- -----------------------------------

使用

栅格布局

插件提供了以下 mixin 可以用于实现栅格布局。栅格大小分别是 1/4、1/3、1/2、2/3、3/4。在 mixin 名称中,后缀数字表示占用的栅格数,例如 .col-1of4 表示该元素占用 1/4 的宽度。

-- --- --
--------- -
  -------- ------------- ---
-

-- --- --
--------- -
  -------- ------------- ---
-

-- --- --
--------- -
  -------- ------------- ---
-

-- --- --
--------- -
  -------- ------------- ---
-

-- --- --
--------- -
  -------- ------------- ---
-

响应式布局

在 mixin 名称中添加后缀 @mq,可以实现响应式布局。例如 .col-1of4@mq 表示该元素在移动设备屏幕上占用 1/4 的宽度,在其他屏幕上占用 1/3 的宽度。

-- -----
------------ -
  -- -------- --- --
  ------ ------ --- ----------- ------ -
    -------- ------------- ---
  -

  -- ------ --- --
  -------- ------------- ---
-

样式控制

在 mixin 名称中添加后缀 -- 后加上样式属性名称,可以实现控制元素的各项样式值。例如, .col-1of4--background 表示控制元素的背景颜色。

-- ----
--------------------- -
  ----------------- ----
-

示例代码

HTML:

---- -----------------------
    ---- --- ---------- - --------- - - ---
    ---- ------------------ --------- --------------- -------
        ----- --- ------
    ------
    ---- --- ------- - - ---
    ---- ------------------ --------- --------------- -------
        ----- --- ------
    ------
    ---- --- ---- - - ---
    ---- ---------------- --------------- -------
        ----- --- ------
    ------
    ---- --- ---- - - ---
    ---- --------------- ------------ --------------- -------
        ----- --- ------
    ------
    ---- --- ------- - - ---
    ---- --------------- ------------ --------------- -------
        ----- --- ------
    ------
    ---- ------ ---
    ---- --------------- ----------- --------------------- --------------- -------
        ------- --- -- --- ----------------
    ------
------

SCSS:

-- ----
------- -----------------------------------

-- ----
--------------- -
    -------- -----------------
    ---------- ------- -- ------
-

-- ----
--------- -
    -------- ------------- ---
-

--------- -
    -------- ------------- ---
-

--------- -
    -------- ------------- ---
-

--------- -
    -------- ------------- ---
-

--------- -
    -------- ------------- ---
-

-- -----
------------ -
    ------ ------ --- ----------- ------ -
        -------- ------------- ---
    -
    -------- ------------- ---
-

------------ -
    ------ ------ --- ----------- ------ -
        -------- ------------- ---
    -
    -------- ------------- ---
-

------------ -
    ------ ------ --- ----------- ------ -
        -------- ------------- ---
    -
    -------- ------------- ---
-

------------ -
    ------ ------ --- ----------- ------ -
        -------- ------------- ---
    -
    -------- ------------- ---
-

------------ -
    ------ ------ --- ----------- ------ -
        -------- ------------- ---
    -
    -------- ------------- ---
-

-- ----
--------------------- -
    ----------------- ----
-

结语

通过使用 ember-singularity-mixins-efarina,我们可以在 Ember.js 项目中快速实现自适应布局的需求。它不仅提供了栅格布局和响应式布局的实现方式,还支持透过 mixin 控制元素的各项样式值。相信对于前端开发人员,它将提供很大的帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005672381e8991b448e39a3


猜你喜欢

  • npm 包 justo.generator.react 使用教程

    在前端开发中,使用 npm 包已经成为了日常工作的一部分。今天我们来介绍一个可以为 React 开发提供快速脚手架的 npm 包:justo.generator.react。

    3 年前
  • npm包node-console-log使用教程

    在前端开发中,输出调试信息是一项非常重要的任务,而 console.log() 则是一个被广泛使用的函数。然而,在大型或复杂的项目中,使用 console.log() 进行调试可能变得非常费时费力。

    3 年前
  • npm包jdf-cms2使用教程

    本文主要介绍npm包jdf-cms2的使用方法和基础知识,帮助前端开发者更好地使用这个工具来完成自己的开发任务。 什么是jdf-cms2? jdf-cms2是一个基于Node.js的多人协作的前端...

    3 年前
  • 使用 npm 包 eip672 的教程

    什么是 eip672? eip672 是一个基于以太坊的 ERC-672 标准实现的 npm 包。ERC-672 标准定义了一种点对点的流量平衡模型,eip672 的作用就是提供了便捷的流量平衡解决方...

    3 年前
  • npm 包 eslint-config-dq 使用教程

    简介 eslint-config-dq 是一个基于 eslint 的 JavaScript 代码规范包,它包含了严格的代码规范和最佳实践,可以帮助前端开发人员在代码的格式、风格、错误处理等方面更为规范...

    3 年前
  • 使用 npm 包 @jeremejevs/fork-ts-checker-webpack-plugin

    在前端开发中,使用 TypeScript 进行编码已经成为了一个趋势。在编译 TypeScript 代码的时候,我们通常会使用 Webpack 进行打包,并使用插件检查代码类型错误。

    3 年前
  • npm 包 orange-sms 使用教程

    介绍 orange-sms 是一个针对前端开发者的短信发送 npm 包。它提供了简单易用的 API 以及多种发送短信方式,比如阿里云短信、腾讯云短信、华信短信等,极大地方便了前端开发者的开发过程。

    3 年前
  • npm包ts-fw使用教程

    前端开发中,编写 TypeScript 是一个趋势。为了更好地编写 TypeScript 代码,开源社区提供了很多优秀的 npm 包。其中,ts-fw 是一个非常实用的包,它提供了很多有用的工具和方法...

    3 年前
  • npm 包 nearest-pantone 使用教程

    在前端开发中,我们经常会涉及到图像和颜色的处理。在处理颜色时,我们需要使用一些工具来将十六进制表示法的颜色转换为其他格式,比如 RGB 或者 HSL。在处理颜色时,我们也经常需要找到离某一个给定颜色最...

    3 年前
  • npm 包 angular4-compo-ui 使用教程

    介绍 angular4-compo-ui 是一个可重用的 Angular 4 组件库,其中包含了许多常见的 UI 组件。使用 angular4-compo-ui 可以大大简化您的前端开发工作,提高代码...

    3 年前
  • npm 包 leveldown-android-prebuilt 使用教程

    介绍 leveldown-android-prebuilt 是一个 npm 包,它是对 LevelDB 数据库进行操作的轻量级 JavaScript 封装。它提供了一个有序键值存储,支持传入任意二进制...

    3 年前
  • npm 包 ts-fw-agenda 使用教程

    前言 在前端开发中,我们经常需要使用各种第三方库来提高开发效率和代码质量。npm 是一个非常棒的包管理器,它为我们提供了丰富的开源组件库。 本文将介绍一个非常实用的 npm 包 ts-fw-agend...

    3 年前
  • npm 包 ts-fw-amqp 使用教程

    在 Web 应用程序开发中,使用消息队列来处理异步任务是一种非常普遍的方案,它可以提高我们应用程序的可靠性和高效性。ts-fw-amqp 是一个基于 TypeScript 的 AMQP 框架,可以帮助...

    3 年前
  • npm 包 ts-fw-cron 使用教程

    简介 ts-fw-cron 是一款基于 TypeScript 开发的 cron 表达式解析库,用于帮助开发者解析 cron 表达式并进行时间计算。本文将介绍如何使用 ts-fw-cron 包进行开发。

    3 年前
  • npm 包 ts-fw-db 使用教程

    前言 在现代应用程序中需要进行数据库操作的场景非常常见,但是在没有开发数据库层的经验或无法承担额外成本的情况下,使用一个成熟的、易于使用的数据库框架是非常必要的。那么,本文介绍的 npm 包 ts-f...

    3 年前
  • npm 包 ts-fw-validator 使用教程

    欢迎来到本文,今天我们将介绍一个前端开源项目中的一款优秀的 npm 包,它就是 ts-fw-validator。 什么是 ts-fw-validator? ts-fw-validator 是一个轻量级...

    3 年前
  • npm 包 @pushrdx/rest-client 使用教程

    前言 在现代 Web 开发中,前后端分离的架构已经成为主流。在这样的架构下,前端与后端通过接口交互数据。而在前端中,使用 RESTful API 成为了普遍的做法。

    3 年前
  • npm 包 express-restful-starter 使用教程

    介绍 express-restful-starter 是一个 Express RESTful 应用程序的快速启动工具包。它基于 Node.js 和 Express 框架,使用 TypeScript 进...

    3 年前
  • npm 包 month-dictionary 使用教程

    什么是 month-dictionary month-dictionary 是一款基于 Node.js 平台的 NPM 包,它提供了快速、简单、方便的方式来获取多语言的月份名称和缩写。

    3 年前
  • npm 包 `tm-service-orders` 使用教程

    简介 tm-service-orders 是一款为前端开发者准备的 npm 包,主要提供针对订单服务的接口操作和相关功能。它具有易用性强、稳定性佳、扩展性强等诸多优点。

    3 年前

相关推荐

    暂无文章