前言
在开发前端项目时,经常会用到一些 UI 框架或者主题来搭建页面。@elephantly/milligram-admin-theme 是一个在 milligram 基础上开发的后台管理 UI 主题,可以快速搭建后台管理页面。这篇文章将介绍如何使用该 npm 包。
安装
首先,在项目根目录中运行以下命令安装该包:
--- ------- ------ ---------------------------------
使用
引入样式
在需要使用主题的页面中引入样式文件:
----- ---------------- -------------------------------------------------------------------------------------------
使用布局
该主题提供了多种布局,可以通过添加不同的 class 来使用。
基础布局
---- --------------------- ---- --------------- ---- ------------- ----------- ----- ------ ------ ------ ------
两列布局
---- --------------------- ---- --------------- ---- ------------- ---------- ------- ------ ---- ------------- ---------- ------- ------ ------ ------
三列布局
---- --------------------- ---- --------------- ---- ------------- ---------- ------- ------ ---- ------------- ---------- ------- ------ ---- ------------- ---------- ------- ------ ------ ------
引入图标
该主题使用了 Font Awesome 图标库,可以通过以下方式使用图标:
-- --------- ------------- ----
使用组件
该主题提供了多种组件,可以通过添加不同的 class 来使用。
表格
------ ----------------- ------- ---- ----------- ------------- -------------- ----- -------- ------- ---- ---------- ------------- ------------------------- ----- ---- ---------- ------------- ------------------------- ----- -------- --------
表单
------ ---- ---------------------- ------ ------------------------------- ------ ----------- ------------- ------------------------ ------ ---- ---------------------- ------ ------------------------------- ------ --------------- ------------- ------------------------ ------ ------- ------------- ------------- -------------------- ----------- -------
卡片
---- ---------------- ---- ----------------------- ---- ----- ------ ---- --------------------- ---- ------- ------ ------
总结
@elephantly/milligram-admin-theme 是一个好用的后台管理 UI 主题,使用方便,可以大大提高开发效率。本文介绍了该主题的基本使用方法,希望对你有帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055ea581e8991b448dc0a3