@abcum/ember-visuals 中文文档教程
ember-visuals
用于在 Ember.js 应用程序中处理 css 和 sass 样式的实用程序。
Usage
Installation
ember install @abcum/ember-visuals
Introduction
ember-visuals 插件添加了功能 f 或使用 css 和 sass 样式，实现快速脚手架和高效的响应式布局，具有简单的媒体查询支持、简单的网格和 flex 构建、简单的 css 动画和内置的多浏览器前缀支持。
Examples
将库导入您的应用样式表。
@import "ember-visuals";
向元素添加 css 动画。
@import "ember-visuals/animations/alerts/bounce";
.simple-bouncer {
@include animation(bounce 3s linear 2s infinite);
}
.special-bouncer {
@include animation(bounce 3s $ease-in-out-circ 2s infinite);
}
构建一个灵活的 css 表。
sheet {
background-color:#000000;
@include table(100%, 1px); // Table is 100% wide with 1px borders
}
sheet-row {
@include table-row;
background-color:#ffffff;
}
sheet-col {
padding:10px;
@include table-col(6 of 12 for 1st); // The 1st column is 50% wide
@include table-col(3 of 12 for 2nd); // The 2nd column is 25% wide
@include table-col(3 of 12 for 3rd); // The 3rd column is 25% wide
}
使用手动换行符构建灵活的 css 网格布局。
grid-line {
padding:30px;
@include grid-line;
}
grid-item {
height:100px;
padding:30px;
border:1px solid #00bfff;
background-color:#ff0000;
@include grid-item(1 of 4);
}
构建具有自动换行符的灵活的 css 网格布局。
grid-item {
height:100px;
padding:30px;
border:1px solid #00bfff;
background-color:#ff0000;
@include grid-item(1 of 5 break every 5);
}
实现基于用户设备的简单响应式布局。
grid-item {
height:100px;
padding:30px;
border:1px solid #00bfff;
background-color:#ff0000;
@include grid-item(1 of 5 break every 5);
@include media(ipad landscape) {
@include grid-item(1 of 4 break every 4);
}
@include media(iphone4, iphone5) {
@include grid-item(1 of 2 break every 2);
}
@include media(iphone6, iphone7, ipad portrait) {
@include grid-item(1 of 3 break every 3);
}
}
Development
make install(install bower and ember-cli dependencies)make upgrade(upgrade ember-cli to the specified version)make tests(run all tests defined in the package)
ember-visuals
A utility for working with css and sass styles in an Ember.js app.
Usage
Installation
ember install @abcum/ember-visuals
Introduction
The ember-visuals addon adds functionality for working with css and sass styling, enabling quick scaffolding and efficient responsive layouts, with simple media query support, easy grid and flex building, simple css animations, and multi-browser prefix support built-in.
Examples
Import the library into your app stylesheet.
@import "ember-visuals";
Add a css animation to an element.
@import "ember-visuals/animations/alerts/bounce";
.simple-bouncer {
@include animation(bounce 3s linear 2s infinite);
}
.special-bouncer {
@include animation(bounce 3s $ease-in-out-circ 2s infinite);
}
Build a flexible css table.
sheet {
background-color:#000000;
@include table(100%, 1px); // Table is 100% wide with 1px borders
}
sheet-row {
@include table-row;
background-color:#ffffff;
}
sheet-col {
padding:10px;
@include table-col(6 of 12 for 1st); // The 1st column is 50% wide
@include table-col(3 of 12 for 2nd); // The 2nd column is 25% wide
@include table-col(3 of 12 for 3rd); // The 3rd column is 25% wide
}
Build a flexible css grid layout with manual row breaks.
grid-line {
padding:30px;
@include grid-line;
}
grid-item {
height:100px;
padding:30px;
border:1px solid #00bfff;
background-color:#ff0000;
@include grid-item(1 of 4);
}
Build a flexible css grid layout with automatic row breaks.
grid-item {
height:100px;
padding:30px;
border:1px solid #00bfff;
background-color:#ff0000;
@include grid-item(1 of 5 break every 5);
}
Implement a simple responsive layout based on the user device.
grid-item {
height:100px;
padding:30px;
border:1px solid #00bfff;
background-color:#ff0000;
@include grid-item(1 of 5 break every 5);
@include media(ipad landscape) {
@include grid-item(1 of 4 break every 4);
}
@include media(iphone4, iphone5) {
@include grid-item(1 of 2 break every 2);
}
@include media(iphone6, iphone7, ipad portrait) {
@include grid-item(1 of 3 break every 3);
}
}
Development
make install(install bower and ember-cli dependencies)make upgrade(upgrade ember-cli to the specified version)make tests(run all tests defined in the package)
