@umijs/ui-theme
是一个由 UmiJS 团队维护的开源 UI 组件库,提供了丰富的主题样式,可选的配色方案和多种预设的样式组件,以便您快速构建现代化的 Web 应用程序界面。
安装
@umijs/ui-theme
可以通过 npm 安装。
--- ------- --------------- ------
使用
引入样式库和样式组件
使用 @umijs/ui-theme
之前,您需要先在您的 index.html
文件中引入样式库,以及需要使用的样式组件。您可以选择 cdn
引用或者本地安装。
cdn 引用
---- -------------------- --- ----- ---------------- -------------------------------------------------------------------------- ---- ---------------------- --- ----- ---------------- ---------------------------------------------------------------------------------
本地安装
--- ------- --------------- ---------- ------
-- --- ------- - ------ ----------- ------ --------------------------------- ------ ---------------------------------------
预定义主题样式
@umijs/ui-theme
提供了多种预定义的主题样式,您可以根据自己的应用场景选择合适的主题。目前提供的主题包括 dark
、light
、indigo
、purple
、pink
、cyan
、green
、yellow
和 red
。
方法一:按照类名使用
---- ---- ----- - --------------- --- ----- -- --- ---- ------------------------ --- ------ ---- --------- ----- --- ---- ------------- ---------------- --- ------
方法二:使用全局变量
------ - -------- - ---- ------------------ -- ------------------- ------------------
配色方案
@umijs/ui-theme
提供了多种预定义的配色方案,您可以根据自己的需求选择合适的配色。
-- ---------- ----------------------- - ------ -- ------ - -------- - ---- -------------------------------- -- -- ------- ---- --------------------
样式组件
@umijs/ui-theme
提供了多个样式组件,包括页头、页脚、面包屑、表格、按钮等等。
---- --------------- ----- --------------------------- ------------ ------------ --------------- ------------------------ -- ------------------------- ----------------- ---------------- ------------------------ -------------------- ------------------------ -------------------- ------------------------ -------------------- ------------------------ -------------------- ------------------- -------------- ------
示例代码
一个简单的示例代码如下:
--------- ----- ----- ---------- ------ ----- ---------------- ---------------------- ---- -------------------- --- ----- ---------------- -------------------------------------------------------------------------- ---- ---------------------- --- ----- ---------------- --------------------------------------------------------------------------------- ------- ------ ---- ---- ----- - --------------- --- ----- -- --- ---- ------------------------ ---- ------ --- ---- --------------- ----- --------------------------- ------------ ------------ --------------- ------------------------ -- ------------------------- ----------------- ---------------- ------------------------ -------------------- ------------------------ -------------------- ------------------------ -------------------- ------------------------ -------------------- ------------------- -------------- ------ ---- ---- --- ---- ---------------- ---------- ----------- ------- -- - -------------- ---------- ---------------------------------- ------ ---- ------ --- ---- --------------- ------------ -------------- ------ ------ ---- -- -- - --- ------- ------------------------------------------------------------ ------- --------------------------------------------------------------------------- ---- ----- --- ------- -------------------------------------------------------------------------------- ---- -------- --- -------- ----- - -------- - - --------- ------------------ --------- ------- -------
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/umijs-ui-theme