SunnyUI/docs/theme.md
2024-09-23 22:21:59 +08:00

4.4 KiB
Raw Blame History

主题


1、Color 色彩

SunnyUI为了避免视觉传达差异使用一套特定的调色板来规定颜色为你所搭建的产品提供一致的外观视觉感受。主要颜色参照Elementhttps://element.eleme.cn/

主色 SunnyUI主要品牌颜色是鲜艳、友好的蓝色。 enter image description here

辅助色 除了主色外的场景色,需要在不同的场景中使用(例如红色表示危险的操作)。 enter image description here

中性色 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 enter image description here

2、Rect边框

我们对边框进行统一规范,可用于按钮、卡片、弹窗等组件里。

主要属性如下: enter image description here

RectColor边框颜色 RectDisableColor控件不可用时边框颜色 RectSides边框显示方向 无:不显示边框 全部:显示全部边框 顶:显示顶部边框 底:显示底部边框 左:显示左侧边框 右:显示右侧边框 注:边框显示和圆角设置相关,如果一侧的边框两端端点为圆角,则此边框必定显示。

3、Radius圆角

我们提供了以下几种圆角样式以供选择。默认圆角大小为5px。

主要属性如下: enter image description here

Radius圆角大小 RadiusSides显示四个角圆角的显示与否

圆角不显示 输入图片说明

默认圆角大小为5px 输入图片说明

圆角大小与控件高度相等时,显示大圆角 输入图片说明

可通过四个角圆角的设置,对控件组合显示 enter image description here

4、Font字体

默认字体为Windows默认字体中文Windows常见默认字体未宋体默认字体大小为12。 全局字体修改见文档: 全局字体设置 界面引用字体请注意字体版权常见的免费字体有思源黑体阿里巴巴普惠体小米MiSans鸿蒙HarmonyOS字体等。 微软雅黑为Windows操作系统字体SunnyUI不包含微软雅黑字体。微软雅黑字体也仅限于屏幕显示此项功能微软已经取得授权用户其他操作与SunnyUI无关。如需制作宣传页、视频、广告等请自行取得微软雅黑授权。

5、Style主题

SunnyUI包含 Element 风格主题 11 个DotNetBar 主题 3 个,其他主题 2 个,包含主题管理组件 UIStyleManager可自由切换主题。

UIStyleManager 参考SunnyUI.Demo.exe将UIStyleManager放置在主窗体上通过选择UIStyleManager的属性Style或者通过代码设置统一主题风格。 UIStyleManager.Style = style;

Style主要属性如下 enter image description here

Style设置主题风格 StyleCustomMode是否为自定义主题设置为False时使用UIStyleManager提供的统一主题风格设置为Ture时可手动调整控件配色不受UIStyleManager约束。

UIStyle.Blue enter image description here

UIStyle.Green enter image description here

UIStyle.Orange enter image description here

UIStyle.Red enter image description here

UIStyle.Gray 输入图片说明

UIStyle.Purple 输入图片说明

UIStyle.LayuiGreen 输入图片说明

UIStyle.LayuiRed 输入图片说明

UIStyle.LayuiOrange 输入图片说明

UIStyle.DarkBlue 输入图片说明

UIStyle.Black 输入图片说明

更新了V3.5.0+版本后,可以设置全局字体:全局字体设置 输入图片说明