Natrium Lib 组件集

Natrium Lib是Natrium Schematics和Natrium项目依赖的组件集。

由于Natrium项目需要基于Angular 6.0.0版本的项目才能工作，因此通过npm安装组件集需要安装Angular 6.0.0依赖，但是实际上Natrium Lib有能力单独在Angular 2.x以上的所有项目中正常工作，如果需要，你可以直接下载源码，直接拷贝相应的代码，并且在安装Bulma、Bulma-extensions和Ionicons后集成到你的Angular项目中。

Natrium Lib的依赖只有Bulma、Bulma-extensions和Ionicons，它们分别为Natrium Lib提供基础组件、响应式布局和图标的支持。

如何安装Natrium Lib？

npm install --save natrium-lib

安装过程中将会自动安装Bulma、Bulma-extensions和Ionicons，并在angular.json中添加相应的CSS引用。安装完成后需要用户手动在app.module.ts中引入NatriumLibModule:

app.module.ts

...
import { NatriumLibModule } from 'natrium-lib';

@NgModule({
    ...
    imports: [
        ...
        NatriumLibModule.forRoot()
    ]
    ...
})

如何卸载Natrium Lib？

npm uninstall --save natrium-lib

出于考量，你可能会依然需要在项目中使用Bulma、Bulma-extensions和Ionicons，因此在卸载时请按需手动清除angular.json文件中的CSS引用，以免Angular项目无法正常编译。以下是CSS引用：

angular.json

...
"styles": [
    ...
    "node_modules/ionicons/dist/css/ionicons.min.css",
    "node_modules/bulma/css/bulma.min.css",
    "node_modules/bulma-extensions/dist/bulma-extensions.min.css"
    ...
],
...

另外，由于在Natrium Lib中部分Bulma-extensions组件需要JavaScript依赖，因此请在卸载Natrium Lib时也请按需删除手动清除angular.json文件中的JavaScript引用，以免Angular项目无法正常编译。以下是JavaScript引用：

angular.json

...
"scripts": [
    ...
    "node_modules/bulma-extensions/bulma-tagsinput/dist/bulma-tagsinput.min.js",
    "node_modules/bulma-extensions/bulma-carousel/dist/js/bulma-carousel.min.js",
    "node_modules/bulma-extensions/bulma-calendar/dist/js/bulma-calendar.min.js",
    "node_modules/bulma-extensions/bulma-accordion/dist/bulma-accordion.min.js",
    "node_modules/bulma-extensions/bulma-quickview/dist/bulma-quickview.min.js"
    ...
],
...

Natrium基础组件集

Natrium Lib使用Bulma以及Bulma-extensions，Bulma作为基本组件的样式集，Bulma-extensions是基础的组件补充。

Bulma和大多Bulma-extensions组件仅需引入CSS样式文件而无需任何JavaScript代码支持，少部分组件需要你在代码中通过变更CSS样式进行激活，这个与Angular的ngClass能够很好的配合。例如：

• Page-loader，来自Bulma-extensions：它的引用方式很简单，只需要一行HTML代码<div class="pageloader"><span class="title">Pageloader</span></div>，默认的状态是收起状态，需要通过在Page-loader的样式中使用is-active激活它，如<div class="pageloader is-active"><span class="title">Pageloader</span></div>。在Angular中，你可以通过ngClass的方式来激活它。

另外Bulma-extensions提供了一部分需要JavaScript支持的复合组件，也在安装时自动将JavaScript引入到了angular.json文件中。自动引入的组件有：

• Accordion
• Calendar
• Carousel
• TagsInput

同时，你在使用Bulma-extensions的某个组件，比如Tooltip，使用方式很简单，只需<button class="button is-primary tooltip" data-tooltip="Tooltip Text">top tooltip</button>即可，但是如果你需要双向绑定Tooltip的内容时，你需要使用<button class="button is-primary tooltip" [attr.data-tooltip]="tooltipText">top tooltip</button>来进行绑定。很多组件的数据都是在attribute中。

组件具体的使用方式与样式请参照Bulma和Bulma-extensions的官方文档。

Natrium图标集

Natrium Lib使用Ionicons作为基本图标的样式集。

Bulma兼容Font Awesome 5、Font Awesome 4、Material Design Icons、Open Iconic、Ionicons等图标集。在Natrium Lib内部Natrium Lib默认集成了Ionicons图标集，你也可以安装以上图标集中的任何图标集进行使用。Ionicons图标集的使用方法非常简单，例如：

<span class="icon has-text-info">
    <i class="ion-ios-albums"></i>
</span>

图标的使用方法请参照Bulma官方文档-图标部分和相应的图标集使用文档。

Natrium复合型组件集

复合型组件是对Bulma的基本组件的Angular组合封装。Natrium Lib的组件设计哲学就是**“Data always first”**，Natrium Lib希望用户只关心数据本身，而不需要在HTML模版上进行修改。

包含以下组件，其中包括：

• NaTable : 通过加载配置项数据和列表数据，可以对表格数据进行展示和操作。
• NaForm : 通过加载配置项数据和表单数据，可以对表单数据进行展示和操作，而且还能轻松获得表单验证的支持。
• NaDetailEditor : 通常用来展示表单详情数据，同时支持字段编辑。通过加载配置项数据和表单数据，可以对表单数据进行展示和操作，而且还能轻松获得表单验证的支持。

Natrium封装型组件集

封装型组件是对常用组件的一层封装，让大家可以直接使用组件而避免非数据驱动或者无法直接使用的副作用。

• NaPagination : 分页导航器。初始化时设置当前页、总页数和页面导航器所要展示的页面数量，就可以轻松获取和操作页面导航数据。由于Bulma的Pagination并不基于数据驱动AJAX请求而是页面跳转——当然也可以通过Angular点击事件驱动，但是用户需要在HTML上进行处理，为了减少用户的代码量——因此Natrium Lib不推荐直接使用Bulma的Pagination组件而是选择重新封装。
• NaComponentHost : 在Angular中加载动态组件时候需要一个Host。直接使用NaComponentHost吧。
• NaOutlet : 在routing-module中经常需要在HTML中嵌套router-outlet。直接使用NaOutlet吧。

Natrium服务型组件集

服务型组件是一些你想用到时仅需通过全局服务就能使用的组件。

• NaNotificationService : 单行文字提示框服务。
• NaModelService : 模态弹窗服务。你可以自定义一个组件，并把它作为一个弹窗进行显示。

Natrium组件风格化

由于Natrium Lib的所有组件都基于Bulma和Bulma-extensions，因此也理应支持Bulma的组件风格化，只是现在暂时无法提供完整的风格化解决方案。使用方法请参考Bulma和Bulma-extensions官方文档。

Natrium Lib最佳实践

由于在日常开发过程中业务场景非常多，同时也希望用户能真正理解Natrium Lib的工作行为方式，方便用户更好的使用，Natrium Lib为大家提供了几种业务场景下的最佳实践文档。

所以界面之类的东西Natrium Lib基本什么都丢给了Bulma...逃