@abcum/ember-visuals 中文文档教程

Question

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)