在 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