@addepar/style-toolbox 中文文档教程
addepar-toolbox
该插件包含 Addepar 设计系统和组件库中使用的大部分 CSS。 我们组件库中的每个插件都会从这个工具箱中导入特定的 CSS“模块”。
作为一般规则，此工具箱适用于标准化、精心设计、可重用的 UI 样式 和组件。 一次性样式或“hacks”应该直接存在于您的应用程序中。
此工具箱中的 UI 被创建为与框架无关。 它具有用于交互的选择器挂钩，但在纯 HTML/CSS 之外不起作用。 在他们自己的项目中创建功能齐全的 UI 取决于开发人员。 例如，如果你想在 Ember 中使用一个有效的下拉组件， 您将使用该组件的我们的 ember-addon 版本（@addepar/pop-menu 的 adde-dropdown）。
Installation
ember install @addepar/style-toolbox
Usage
安装后，您可以开始将 Sass 文件直接导入到您自己的 CSS 中。
例如，假设您的应用程序具有典型的样式目录设置，您可以 在您的 app/styles/app.scss 文件中包含所有工具箱：
@import '@addepar/style-toolbox';
或者对于更具体的 UI 部分：
@import '@addepar/style-toolbox/onyx/elements/inputs/button/index';
Contributing
Installation
git clone <repository-url>cd addepar-style-toolboxyarn install
Linting
./node_modules/sass-lint/bin/sass-lint.js -vq
Running tests
- Tests TBD, this is purely CSS with no JS
Running the dummy application
ember serve- Visit the dummy application at http://localhost:4200.
有关使用 ember-cli 的更多信息，请访问 https://ember-cli.com/。
License
此项目已根据 MIT 许可 获得许可。
addepar-toolbox
This addon contains most of the CSS used in Addepar's design system and component library. Each addon in our component library will import specific CSS "modules" from this toolbox.
As a general rule, this toolbox is for standardized, well-designed, reusable UI styles and components. One-off styling or "hacks" should live directly within your application.
The UI in this toolbox was created to be framework agnostic. It has selector hooks for interactivity, but does not function outside of pure HTML/CSS. It is up to the developer to create fully functioning UI in their own projects. So for example, if you want to use a working dropdown component with Ember, you would use our ember-addon version of that component (adde-dropdown from @addepar/pop-menu).
Installation
ember install @addepar/style-toolbox
Usage
Once installed, you can start importing the Sass files directly into your own CSS.
For example, assuming your app has the typical styles directory setup, you can include all of the toolbox in your app/styles/app.scss file:
@import '@addepar/style-toolbox';
Or for a more specific UI piece:
@import '@addepar/style-toolbox/onyx/elements/inputs/button/index';
Contributing
Installation
git clone <repository-url>cd addepar-style-toolboxyarn install
Linting
./node_modules/sass-lint/bin/sass-lint.js -vq
Running tests
- Tests TBD, this is purely CSS with no JS
Running the dummy application
ember serve- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
License
This project is licensed under the MIT License.
