配置
提示
SinleUI 框架目前支持暗黑模式、多主题切换,支持字体、字体大小、圆角大小、动画时长、层级、导航栏高度、页面背景色等全局配置,一处更新,全局生效。
Configs
属性
名称 | 类型 | 描述 |
---|---|---|
app | AppConfig | 应用基础配置 |
page | PageConfig | 全局页面配置 |
font | FontConfig | 全局字体配置 |
radius | RadiusConfig | 全局圆角配置 |
aniTime | AniTimeConfig | 全局动画时长配置 |
zIndex | zIndexStyles | 全局层级样式 |
AppConfig
属性
名称 | 类型 | 只读 | 默认值 | 描述 |
---|---|---|---|---|
theme | String | 否 | light | 应用当前颜色模式。可修改,只支持 light | dark 。 |
autoTheme | Boolean | 否 | true | 是否跟随系统暗黑模式自动切换。可修改。 |
PageConfig
属性
名称 | 类型 | 只读 | 默认值 | 描述 |
---|---|---|---|---|
topbarHeight | String | 否 | 80px | 页面 sn-topbar (导航栏)组件高度(不计状态栏高度)。可修改。 |
lightBgColor | String | 否 | #f9f9f9 | 亮色模式页面默认背景颜色。可修改。 |
darkBgColor | String | 否 | #262628 | 暗黑模式页面默认背景颜色。可修改。 |
FontConfig
提示
设基本字号 baseSize
为 v (v >= 5)
则字号板为 [v - 4, v - 2, v, v + 2, v + 6, v + 10, v + 16, v + 24, v + 32, v + 42, v + 54]
size
方法传入参数即为所需字号在字号板中的索引
属性
名称 | 类型 | 只读 | 默认值 | 描述 |
---|---|---|---|---|
baseSize | String | 否 | 14px | 字体基本大小,单位为 px | rpx 。可修改。 |
mainFamily | String | 否 | misans-normal | 全局字体名称。可修改。 |
方法
名称 | 参数 | 返回值 | 描述 |
---|---|---|---|
size | (level:number=2) | Number | 根据提供的字号等级,从字号板获取对应的字号。字号等级默认为 2 ,有效范围是 0 到 10 。 |
RadiusConfig
提示
下表中设圆角基本大小 baseSize
为 v (v >= 0)
,且各圆角大小都不小于 0px
属性
名称 | 类型 | 只读 | 默认值 | 描述 |
---|---|---|---|---|
baseSize | String | 否 | 12px | 圆角基本大小,单位为 px 。可修改。 |
circle | String | 是 | 12000px | 最大圆角,值为 1000v ,单位为 px 。 |
normal | String | 是 | 12px | 普通圆角大小,值为 v ,单位为 px 。 |
xxsmall | String | 是 | 4px | 更小圆角大小,值为 v-8 ,单位为 px 。 |
xsmall | String | 是 | 6px | 较小圆角大小,值为 v-6 ,单位为 px 。 |
small | String | 是 | 8px | 小圆角大小,值为 v-4 ,单位为 px 。 |
large | String | 是 | 16px | 大圆角大小,值为 v+4 ,单位为 px 。 |
xlarge | String | 是 | 20px | 较大圆角大小,值为 v+8 ,单位为 px 。 |
xxlarge | String | 是 | 24px | 更大圆角大小,值为 v+12 ,单位为 px 。 |
AniTimeConfig
提示
下表中设动画基本时长 baseTime
为 v (v >= 0)
,且各动画时长都不小于 0ms
属性
名称 | 类型 | 只读 | 默认值 | 描述 |
---|---|---|---|---|
baseTime | String | 否 | 100ms | 动画基本时长,单位为 ms 。可修改。 |
short | String | 是 | 100ms | 短时间,值为 v ,单位为 ms 。 |
normal | String | 是 | 200ms | 正常时间,值为 2v ,单位为 ms 。 |
long | String | 是 | 300ms | 长时间,值为 3v ,单位为 ms 。 |
xlong | String | 是 | 400ms | 更长时间,值为 4v ,单位为 ms 。 |
zIndexStyles
属性
名称 | 类型 | 只读 | 默认值 | 描述 |
---|---|---|---|---|
navTabBar | Number | 是 | 100 | 导航标签栏层级。 |
badge | Number | 是 | 95 | 徽标层级。 |
float | Number | 是 | 991 | 浮动元素层级。 |
overlay | Number | 是 | 1000 | 遮罩层层级。 |
popup | Number | 是 | 1001 | 弹出层层级。 |
toast | Number | 是 | 1002 | sn-toast 轻提示层级。 |