@umijs/ui-theme 是一个由 UmiJS 团队维护的开源 UI 组件库，提供了丰富的主题样式，可选的配色方案和多种预设的样式组件，以便您快速构建现代化的 Web 应用程序界面。
安装
@umijs/ui-theme 可以通过 npm 安装。
npm install @umijs/ui-theme --save
使用
引入样式库和样式组件
使用 @umijs/ui-theme 之前，您需要先在您的 index.html 文件中引入样式库，以及需要使用的样式组件。您可以选择 cdn 引用或者本地安装。
cdn 引用
<!-- 引入样式库，提供多种预定义主题和配色方案 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@umijs/ui-theme@1.0.1/dist/index.css"/> <!-- 引入样式组件，例如页头、页脚、按钮、表格等等 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css"/>
本地安装
npm install @umijs/ui-theme element-ui --save
// 在您的 main.js 或 app.js 中引入样式库和样式组件 import '@umijs/ui-theme/dist/index.css'; import 'element-ui/lib/theme-chalk/index.css';
预定义主题样式
@umijs/ui-theme 提供了多种预定义的主题样式，您可以根据自己的应用场景选择合适的主题。目前提供的主题包括 dark、light、indigo、purple、pink、cyan、green、yellow 和 red。
方法一：按照类名使用
-- -------------------- ---- ------- ---- ---- ----- - --------------- --- ----- -- --- ---- ------------------------ --- ------ ---- --------- ----- --- ---- ------------- ---------------- --- ------
方法二：使用全局变量
import { setTheme } from '@umijs/ui-theme';
// 设置全局主题样式，接收主题名称作为参数
setTheme('light');配色方案
@umijs/ui-theme 提供了多种预定义的配色方案，您可以根据自己的需求选择合适的配色。
// 引入配色方案，其中有 primary、success、warning 和 danger 四种
import { setTheme } from '@umijs/ui-theme/dist/colorful';
// 激活 primary 配色方案
setTheme('primary');样式组件
@umijs/ui-theme 提供了多个样式组件，包括页头、页脚、面包屑、表格、按钮等等。
-- -------------------- ---- -------
---- ---------------
----- --------------------------- ------------
------------ --------------- ------------------------
-- -------------------------
----------------- ----------------
------------------------ --------------------
------------------------ --------------------
------------------------ --------------------
------------------------ --------------------
-------------------
--------------
------示例代码
一个简单的示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------
---- -------------------- ---
----- ---------------- --------------------------------------------------------------------------
---- ---------------------- ---
----- ---------------- ---------------------------------------------------------------------------------
-------
------
---- ---- ----- - --------------- --- ----- -- ---
---- ------------------------
---- ------ ---
---- ---------------
----- --------------------------- ------------
------------ --------------- ------------------------
-- -------------------------
----------------- ----------------
------------------------ --------------------
------------------------ --------------------
------------------------ --------------------
------------------------ --------------------
-------------------
--------------
------
---- ---- ---
---- ----------------
---------- -----------
------- -- - --------------
---------- ----------------------------------
------
---- ------ ---
---- ---------------
------------ --------------
------
------
---- -- -- - ---
------- ------------------------------------------------------------
------- ---------------------------------------------------------------------------
---- ----- ---
------- --------------------------------------------------------------------------------
---- -------- ---
--------
----- - -------- - - ---------
------------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/umijs-ui-theme