README

Clarity 设计系统

项目 Clarity 是一个开源设计系统，它将 UX 指南、HTML/CSS 框架和 Angular 2 组件结合起来。此仓库包含构建、定制、测试和部署 Clarity 所需的一切。要获取完整文档，请访问 Clarity 网站。

入门

Clarity 以三个 npm 包的形式发布

• clarity-icons. 包含自定义元素图标。
• clarity-ui. 包含构建 HTML 组件的静态样式。
• clarity-angular. 包含 Angular 2 组件。此包依赖于 clarity-ui 以提供样式。

使用 Clarity 运行示例 Angular 2 应用程序的最简单方法是使用 Clarity Seed。

如果您已经有了 Angular 2 应用程序，您可以按照以下安装步骤将 Clarity 包含并用于您的应用程序。

安装 Clarity 图标

1. 通过 npm 安装 Clarity 图标包

   npm install clarity-icons --save

2. 安装 Custom Elements 的 polyfill

   npm install @webcomponents/custom-elements@1.0.0-alpha.3 --save

3. (可选) 如果您的应用程序支持 IE10，polyfill 需要MutationObserver shim才能工作。如果您的应用程序不支持 IE10，您可以跳过以下安装

   npm install mutationobserver-shim@0.3.2 --save

4. 在您的 HTML 中包含 clarity-icons.min.css 和 clarity-icons.min.js。由于 custom-elements.min.js 依赖于 Custom Elements polyfill，请确保在 clarity-icons.min.js 之前包含它。此外，如果您的应用程序需要支持 IE10，请在 polyfill 之前包含 mutationobserver.min.js

   <link rel="stylesheet" href="path/to/node_modules/clarity-icons/clarity-icons.min.css">
   
   <script src="path/to/node_modules/mutationobserver-shim/dist/mutationobserver.min.js"></script>
   <script src="path/to/node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
   <script src="path/to/node_modules/clarity-icons/clarity-icons.min.js"></script>

   如果您使用的是 angular-cli 构建网站，您可以通过在 angular-cli.json 中将文件添加到 styles 数组和 scripts 数组来实现上述操作

   "styles": [
       ...
       "../node_modules/clarity-icons/clarity-icons.min.css",
       ...
   ],
   "scripts": [
       ...
       "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
       "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
       "../node_modules/clarity-icons/clarity-icons.min.js"
       ...
   ]

安装 Clarity UI

1. 通过 npm 安装 Clarity UI 包

   npm install clarity-ui --save

2. 在您的 HTML 文件中包含 clarity-ui.min.css

   <link rel="stylesheet" href="path/to/node_modules/clarity-ui/clarity-ui.min.css">

   如果您使用的是 angular-cli，您可以通过将文件添加到 angular-cli.json 中的 styles 数组来实现上述操作

   "styles": [
       ...
       "../node_modules/clarity-ui/clarity-ui.min.css"
       ...
   ]

3. 使用 Clarity CSS 类名和标记编写您的 HTML。

安装 Clarity Angular

1. 按照上述步骤安装 Clarity 图标和 Clarity UI。

2. 通过 npm 安装 clarity-angular 包

   npm install clarity-angular --save

3. 将 ClarityModule 导入到您的 Angular 2 应用程序的模块中。您的应用程序的主要模块可能如下所示

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { ClarityModule } from 'clarity-angular';
   import { AppComponent } from './app.component';
   
   @NgModule({
       imports: [
           BrowserModule,
           ClarityModule.forRoot(),
           ....
        ],
        declarations: [ AppComponent ],
        bootstrap: [ AppComponent ]
   })
   export class AppModule {    }

   如果您使用的是 systemjs，请在以下示例中添加 clarity-angular 配置。如果您的应用程序已设置 rxjs 包但尚未设置 main 文件，请添加它。

   System.config({
   	...
   	map: {
   	   ...
   	   'clarity-angular': 'node_modules/clarity-angular/clarity-angular.umd.js',
   	},
   	packages: {
           ...
           'rxjs' : { main: 'Rx.js', defaultExtension: 'js' },
   	}
   	...
   });
   

文档

有关 Clarity 设计系统的文档，包括组件列表和示例用法，请参阅 我们的网站。

贡献

Clarity 项目团队欢迎社区的贡献。有关更详细的信息，请参阅 CONTRIBUTING.md。

许可证

• Clarity 设计系统采用 MIT 许可证。
• 字体采用 Open Font License (OFL) 许可证。

反馈

如果您发现了一个错误或想要请求一个新功能，请通过GitHub issue提出。如果可能，请通过fork Clarity Plunker 模板之一来提供一个最小化的示例，以说明问题。

• Clarity 版本：最新版
• Clarity 版本：0.7.6