前言
在开发前端项目时，经常会用到一些 UI 框架或者主题来搭建页面。@elephantly/milligram-admin-theme 是一个在 milligram 基础上开发的后台管理 UI 主题，可以快速搭建后台管理页面。这篇文章将介绍如何使用该 npm 包。
安装
首先，在项目根目录中运行以下命令安装该包：
npm install --save @elephantly/milligram-admin-theme
使用
引入样式
在需要使用主题的页面中引入样式文件：
<link rel="stylesheet" href="./node_modules/@elephantly/milligram-admin-theme/dist/milligram-admin-theme.min.css">
使用布局
该主题提供了多种布局，可以通过添加不同的 class 来使用。
基础布局
<div class="ma-container">
<div class="ma-row">
<div class="ma-col ma-col-12">
Basic layout
</div>
</div>
</div>两列布局
-- -------------------- ---- -------
---- ---------------------
---- ---------------
---- ------------- ----------
-------
------
---- ------------- ----------
-------
------
------
------三列布局
-- -------------------- ---- -------
---- ---------------------
---- ---------------
---- ------------- ----------
-------
------
---- ------------- ----------
-------
------
---- ------------- ----------
-------
------
------
------引入图标
该主题使用了 Font Awesome 图标库，可以通过以下方式使用图标：
<i class="fa fa-user"></i> user
使用组件
该主题提供了多种组件，可以通过添加不同的 class 来使用。
表格
-- -------------------- ---- -------
------ -----------------
-------
----
-----------
-------------
--------------
-----
--------
-------
----
----------
-------------
-------------------------
-----
----
----------
-------------
-------------------------
-----
--------
--------表单
-- -------------------- ---- -------
------
---- ----------------------
------ -------------------------------
------ ----------- ------------- ------------------------
------
---- ----------------------
------ -------------------------------
------ --------------- ------------- ------------------------
------
------- ------------- ------------- -------------------- -----------
-------卡片
<div class="ma-card">
<div class="ma-card-header">
Card Title
</div>
<div class="ma-card-body">
Card Content
</div>
</div>总结
@elephantly/milligram-admin-theme 是一个好用的后台管理 UI 主题，使用方便，可以大大提高开发效率。本文介绍了该主题的基本使用方法，希望对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea581e8991b448dc0a3