简介
ember-tachyons-sweeper 是一款基于 Ember.js 和 Tachyons 的实用工具，旨在简化用户界面的开发过程。本文提供一个全面的使用教程，介绍如何安装和使用这个 npm 包，以及其使用细节。
安装
ember-tachyons-sweeper 的安装步骤非常简单，只需使用 npm 安装即可：
npm install ember-tachyons-sweeper --save
在安装之后，你需要将样式文件添加到你的应用中。你可以使用 ember-cli-addon-docs 这个插件，或手动在你的 app.scss 中添加以下内容：
@import "ember-tachyons-sweeper";
使用
使用 ember-tachyons-sweeper 可以让你更快、更容易地构建界面。它提供了一些常用的常见 UI 组件，比如按钮、表单、列表等，你可以直接在你的项目中使用它们。
按钮
你可以使用 tc-btn 类来创建一个按钮：
<button class="tc-btn">Click me!</button>
按钮样式
使用不同的样式类可以创建不同的按钮类型：
<button class="tc-btn tc-btn--primary">Primary button</button> <button class="tc-btn tc-btn--secondary">Secondary button</button> <button class="tc-btn tc-btn--outline">Outline button</button> <button class="tc-btn tc-btn--link">Link button</button>
按钮尺寸
使用不同的尺寸类可以创建不同大小的按钮：
<button class="tc-btn tc-btn--sm">Small button</button> <button class="tc-btn tc-btn--lg">Large button</button>
表单
你可以使用以下类来创建表单控件：
tc-form：用于包含整个表单。tc-form__group：用于包含表单控件及其标签。tc-form__label：用于标记表单控件。tc-form__control：用于包含表单控件。
例如，下面的代码使用以上类来创建一个具有一组文本输入框和单选按钮的表单：
-- -------------------- ---- -------
----- ----------------
---- -----------------------
------ ----------------------------------
---- -------------------------
------ ----------- ---------------- ---------------------
------
------
---- -----------------------
------ ---------------------------------
---- -------------------------
------ -----------------
------ ------------ ------------- -------------
--------------
--------
------ -----------------
------ ------------ ------------- ---------------
--------------
--------
------
------
-------列表
你可以使用 tc-list 类来创建一个列表：
<ul class="tc-list"> <li class="tc-list__item">列表项 1</li> <li class="tc-list__item">列表项 2</li> <li class="tc-list__item">列表项 3</li> </ul>
示例代码
以下是一个使用 ember-tachyons-sweeper 的示例代码：
-- -------------------- ---- -------
---- ---------------------
--- ----------------- --------------------------
-- -----------------------------------------------------
----- --------------- -----------
---- -----------------------
------ ---------------------------------
---- -------------------------
------ ----------- ---------------- --------------------
------
------
---- -----------------------
------ ---------------------------------
---- -------------------------
------ ------------ ---------------- --------------------
------
------
---- -----------------------
------ ---------------------------------
---- -------------------------
--------- ------------------- -------------------------------
------
------
------- ------------- ------------- ----------------------------
-------
--- ----------------- --------------------------
--- ----------------
--- ------------------------ ------
--- ------------------------ ------
--- ------------------------ ------
-----
------结论
现在你已经了解了如何使用 npm 包 ember-tachyons-sweeper 来简化你的界面开发，你可以通过将其引入你的应用程序中来快速构建用户界面。但是，使用此工具包并不妨碍你自己编写样式，你也可以根据需要进行自定义。如果你想了解更多有关 Tachyons 的信息，请参考官方文档：http://tachyons.io/docs/。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609581e8991b448deca1