快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

主题配置

自定义主题

JUI4CSS默认提供一套主题,并且通过CSS Variables进行样式预设配置。

样式配置

你可以在层叠样式表jui.css中,通过修改Style Configuration进行样式配置,所配置的样式值会自动被引用在各个元素和组件中。

样式配置分为7个部分:ColorBox ShadowBorderFont SizeWidthPaddingMargin

Color 颜色配置分为4类:基本色 Basic Color Style浅色 Light Color深色 Dark Color渐进色 Gradient Color。色彩和默认值如下:

基本色 Basic Color Style

变量 色彩 默认值
--primary #6699ff
--success #2db755
--warning #ff9900
--danger #ed4014
--black #000
--major #242121
--default #575454
--basic #909399
--meta #b9b9b9
--gray #e7e7e7
--light #f5f6f9
--white #fff
--disalbed #b9b9b9
--disalbedBg #f5f6f9
--disalbedBorder #e7e7e7
--brand #2db755
--link #2db755
--select #2db755

浅色 Light Color

基于Basic Color,按RGBA,设定alpha 14.5%,得到Light Color。

变量 色彩 默认值
--primaryLight rgba(102,153,255,.145)
--successLight rgba(45,183,85,.145)
--warningLight rgba(255,153,0,.145)
--dangerLight rgba(237,64,20,.145)

深色 Dark Color

基于Basic Color,按HSB,设定B-27%,得到Dark Color。

变量 色彩 默认值
--primaryDark #4a70ba
--successDark #1d7335
--warningDark #ba7000
--dangerDark #a82c0d

渐进色 Gradient Color

变量 色彩 默认值
--gradualRed linear-gradient(45deg, #f43f3b, #ec008c)
--gradualOrange linear-gradient(45deg, #ff9700, #ed1c24)
--gradualGreen linear-gradient(45deg, #39b54a, #8dc63f)
--gradualPurple linear-gradient(45deg, #9000ff, #5e00ff)
--gradualPink linear-gradient(45deg, #ec008c, #6739b6)
--gradualBlue linear-gradient(45deg, #0081ff, #1cbbb4)

Box Shadow 盒阴影分为3种:boxShadowboxShadowLightboxShadowDark。默认主题值如下:

--boxShadow: 0 2px 12px 0 rgba(0,0,0,.1);
--boxShadowLight: 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04);
--boxShadowDark: 0 1px 3px rgba(0,0,0,.3);
BoxShadow
BoxShadowLight
BoxShadowDark

Border 边框分为10种:border默认细边框、borderBold默认粗边框、borderLight浅色细边框、borderLightBold浅色粗边框、borderMeta深色细边框、borderMetaBold深色粗边框、borderDefault主色细边框、borderDefaultBold主色粗边框、borderTransparent透明细边框、borderTransparentBold透明粗边框。默认主题值如下:

--border: 1px solid var(--gray);
--borderBold: 2px solid var(--gray);
--borderLight: 1px solid var(--light);
--borderLightBold: 2px solid var(--light);
--borderMeta: 1px solid var(--meta);
--borderMetaBold: 2px solid var(--meta);
--borderDefault: 1px solid var(--default);
--borderDefaultBold: 2px solid var(--default);
--borderTransparent: 1px solid transparent;
--borderTransparentBold: 2px solid transparent;

Font Size 字号分为9种:miniSizesmallSizedefaultSizemediumsizeLargeSizesmallTitleSizeTitleSizemediumTitleSizelargeTitleSize。默认主题值如下:

变量 样式 默认值
--miniSize miniSize 1rem
--smallSize smallSize 1.2rem
--defaultSize defaultSize 1.4rem
--mediumSize mediumSize 1.6rem
--largeSize largeSize 1.8rem
--smallTitleSize smallTitleSize 1.8rem
--TitleSize TitleSize 2rem
--mediumTitleSize mediumTitleSize 2.2rem
--largeTitleSize largeTitleSize 2.4rem
JUI中,默认基础字号为10px,即1rem = 10px

Width 宽度:pageWidth页宽、mainWidth主容器宽、asideWidth侧边栏宽。

--pageWidth: 1100px
--mainWidth: 795px
--asideWidth: 290px

Padding 内边距分为5种:paddingMinipaddingSmallpaddingpaddingMediumpaddingLarge。默认主题值如下:

--paddingMini: .3rem;
--paddingSmall: .5rem;
--padding: 1rem;
--paddingMedium: 1.5rem;
--paddingLarge: 2rem;

Margin 外边距分为5种:marginMinimarginSmallmarginmarginMediummarginLarge。默认主题值如下:

--marginMini: .3rem;
--marginSmall: .5rem;
--margin: 1rem;
--marginMedium: 1.5rem;
--marginLarge: 2rem;
样式兼容

虽然CSS Variables让项目维护更加方便,但是IE和其他低版本浏览器对这一特性不兼容,JUI不可以直接在这些低版本浏览器上作业。

如果你的项目需要考虑老浏览器兼容性问题,可以利用编辑器对于CSS Variables进行批量替换,来解决兼容性的问题。

比如:你定义的--miniSize: 1rem,用1rem批量替换var(--miniSize)即可。

命名规则

主题命名 JUI使用统一的主题命名,规则j-type-**为主题值,常用主题有j-type-primaryj-type-warningj-type-ghostj-type-ghost-primary等。

状态命名 JUI使用统一的状态命名,规则j-is-**为状态值,常用状态有j-is-disabledj-is-visiblej-is-leftj-is-oblique等。

类型命名 JUI使用统一的类型命名,规则j-is-**为类型值,常用类型有j-is-blockj-is-inlinej-is-inline-blockj-is-flex等。

上一章:快速开始
下一章:布局 Layout