简介
ng-semantic-ui-aot 是一个前端的 npm 包，它是基于 Semantic UI 和 Angular 的一个 UI 组件库。在本文中，我们将学习如何在你的项目中使用它。本文将详细介绍必要的步骤，包括如何安装和使用该包。
安装
在开始使用 ng-semantic-ui-aot 之前，我们需要先安装它。在你的项目根目录下，运行下述命令：
npm install ng-semantic-ui-aot --save
使用
现在，我们已经安装了 ng-semantic-ui-aot，让我们看一下如何在项目中使用它。我们可以按照以下步骤来使用它：
引入 CSS 文件
在你的项目中引入 CSS 文件。一般使用 Angular 的 CLI 构建的项目中，可以在 angular.json 文件中的 styles 数组中引入该文件。如下：
"styles": [
"node_modules/ng-semantic-ui-aot/jspm_packages/github/Semantic-Org/Semantic-UI@^2.4.2/dist/semantic.min.css"
],在应用中导入模块
在你的应用中，你需要导入 ng-semantic-ui-aot 主模块：
-- -------------------- ---- -------
------ - ---------------- - ---- ---------------------
-----------
-------- -
-----------------
---
--
---
--使用组件
现在，你已经可以使用 ng-semantic-ui-aot 中的组件了。例如，你可以使用按钮组件，如下：
<sm-button class="positive">按钮</sm-button>
此外，在模板中使用其他组件也类似：
<sm-form>
<div class="field">
<label>用户名</label>
<input type="text" name="username">
</div>
<sm-button class="primary">提交</sm-button>
</sm-form>示例代码
下面是一个示例代码，它展示了如何使用 ng-semantic-ui-aot 中的各种组件：
-- -------------------- ---- -------
----------- ------------- -----------------
--- --------- ---------------- -- ------------
---------- ------------------------------
-------------------------
---------
---- --------------
------------------
------ ----------- ----------------
------
---------- --------------- ----------------------------------
----------
----------- --------------- ----------------------------------------
-------------总结
本文我们学习了如何在一个 Angular 项目中使用 ng-semantic-ui-aot 包。我们了解了该包的主要特性和如何使用它提供的组件。现在，你应该已经准备好开始在你的项目中使用它了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f93238a385564ab7061