写针对具体控件的 YSS 前,请先读窗体 XML 获取控件 名称 与 typeId,见 窗口 XML 参考。
YSS 用于描述窗体控件的视觉样式,属性名全部为英文,在代码中通过 加载YSS() / 应用YSS() 应用。
自动加载(默认关闭):设置 → 编译 →「YSS 自动加载」。关闭时,设计期打开窗体与运行时均不自动套用 资源/{窗体}.yss。开启后,资源目录或嵌入的 .yss 会自动套用。已从主题商店套用的「窗体主题包」不受此开关影响,运行时仍会带上主题样式。
快速上手
- 在工程「资源」目录创建
{窗体名}.yss(推荐),或勾选自动加载后依赖 exe 旁同名文件。 - 若未勾选「YSS 自动加载」,请在代码里
加载YSS("xxx.yss")/应用YSS(...),或在设计器中套用「窗体主题包」。 - 窗体主题包:在主题商店给当前窗体选用主题即可;主题作底,你自己写的规则写在后面可以覆盖。不必再勾「YSS 自动加载」。
- 子目录主题 / 换肤用显式
加载YSS。
硬约束
- 属性名必须是英文(如
background-color),不要写中文属性键。 - 按名选择器用 XML 的
名称,不是标题:button#按钮1/#按钮1。 - 「YSS 自动加载」默认关闭;勾选后才自动加载 exe 旁
{窗体名}.yss。子目录主题 / 换肤用显式加载YSS。 :/img/a.png相对 exe 根目录,与.yss是否在子目录无关。- 布局弹簧、MessageBar 托盘等不做 YSS 选择器(见各分文档)。
- 命令签名:
加载YSS/应用YSS见 basic-yss.md 与下文「运行时加载」。
分组件文档结构: 每篇按 属性 → 方法 → 事件 → YSS 样式 组织。
分组件文档(一组件一篇): 按钮 · 标签 · 文本框 · 超级文本框 · 图片框 · 分组框 / 卡片 · 组合框 · 单选框 · 复选框 · 开关 · 进度条 · 进度环 · 滑块 · 列表框 · 选项卡 · 树形视图 · 菜单栏 · 工具栏 · 表格 · 数据表格 · 画布 · 浏览器 · 日期选择器 · 颜色选择器 · 数值微调框 · 状态栏 · 分页 · 视频播放器 · 图表 · 消息条(支持库 API,非 YSS 选择器) · 气泡提示 · 托盘 · 完整示例见 样式演示_单选复选开关进度条.yss
快速开始
- 在工程 「资源」 目录放置
{窗体名}.yss(推荐),例如资源/主窗口.yss - 图片放在 「资源」 子目录,例如
资源/img/check-square.png - F5 编译运行:资源会复制到 exe 同目录(
img/等) - 勾选「YSS 自动加载」后,启动会套用 exe 旁
{窗体名}.yss;未勾选则用加载YSS(),或在设计器中套用窗体主题包
/* 资源/主窗口.yss */
button {
border-radius: 4;
}
checkbox#复选框1 {
indicator-size: 18;
indicator-background-color: #2D2D30;
indicator-border-color: #707070;
}
checkbox#复选框1:checked {
checkmark-color: #00CC66;
indicator-checked-image: :/img/check-square.png;
}
// 可选:子目录 YSS 或运行时换肤
函数 主窗口.创建 {
加载YSS(":/yss/主题.yss")
}
文件位置
| 位置 | 说明 |
|---|---|
资源/{窗体名}.yss |
推荐;F5 整棵复制到 exe 旁 |
窗口/{窗体名}/{窗体名}.yss |
与窗口 XML 同目录;构建时也会参与生成 |
exe 旁 {窗体名}.yss |
勾选「YSS 自动加载」时运行时套用;否则需 加载YSS |
exe 旁 yss/xxx.yss |
子目录样式,需 加载YSS("yss/xxx.yss") |
语法
选择器 {
属性名: 值;
}
- 颜色:
#RRGGBB或不透明以外的#RRGGBBAA(CSS 顺序:红绿蓝 + 透明度)。
不要把 8 位写成 Windows 习惯的#AARRGGBB(会把末两字节当成 alpha,例如#FF252526实际几乎全透明,下拉面板会「穿透」闪烁)。不透明请写#252526或#252526FF。
(画布置像素/ 部分绘图 API 仍用#AARRGGBB,见各控件文档,与 YSS 样式表不同。) - 布尔:
true/false - 注释:
// 行注释或/* 块注释 */ - 数值:整数(单位一般为 DIP 像素)
选择器
| 写法 | 含义 |
|---|---|
button |
该类型全部控件 |
button#按钮_确认 |
指定名称的按钮 |
#按钮_确认 |
指定名称(任意类型) |
button:hover |
悬停态规则块 |
checkbox:checked |
复选框选中态 |
checkbox:indeterminate |
复选框不确定态(三态) |
tabwidget#导航 label |
后代选择器(空格):名为「导航」的选项卡内部全部标签(任意深度) |
card label |
分组框/卡片内的标签(card≡groupbox) |
card > label |
子选择器:仅卡片的直接子标签 |
button#A, button#B |
逗号列表:多选择器共享同一属性块 |
卡片可用 corner-brackets: true + corner-bracket-color 画四角 L 形装饰(赛博风)。
伪状态: :hover :pressed :focus :disabled :checked :indeterminate :on :off :default(selected 等同 pressed)
子控件: :item :tab :pane :chunk :handle :groove :drop-down :indicator(各组件支持的子控件见对应分文档)
:hover / :pressed 块中的 background-color、color 会映射为悬停/按下专用色,运行时随交互生效。
选择器索引(设计器组件 ↔ YSS 选择器)
| 设计器组件 | YSS 选择器 | 文档 |
|---|---|---|
| 窗体 | form / window / 窗体名 |
本文 窗体(form)选择器 |
| 按钮 | button |
button.md |
| 标签 | label |
label.md |
| 文本框 / 多行文本框 | textbox |
textbox.md |
| 超级文本框 | supertextbox |
supertextbox.md |
| 图片框 | picturebox |
picturebox.md |
| 分组框 | groupbox |
groupbox.md |
| 卡片(同分组框) | card(≡ groupbox) |
groupbox.md |
| 组合框 | combobox |
combobox.md |
| 单选框 | radiobutton |
radiobutton.md |
| 复选框 | checkbox |
checkbox.md |
| 开关 | switch |
switch.md |
| 进度条 | progressbar |
progressbar.md |
| 滑块 | slider |
slider.md |
| 列表框 | listbox |
listbox.md |
| 选项卡 | tabwidget |
tabwidget.md |
| 树形视图 | treeview |
treeview.md |
| 菜单栏 | menubar |
menubar.md |
| 工具栏 | toolbar |
toolbar.md |
| 表格 | tablewidget |
tablewidget.md |
| 数据表格 | datagrid |
datagrid.md |
| 画布 | canvas |
canvas.md |
| 浏览器 | webbrowser |
webbrowser.md |
| 日期选择器 | datepicker |
datepicker.md |
| 颜色选择器 | colorpicker |
colorpicker.md |
| 数值微调框 | spinbox |
spinbox.md |
| 状态栏 | statusbar |
statusbar.md |
| 进度环 | progressring |
progressring.md |
| 分页 | pager |
pager.md |
| 视频播放器 | videoplayer |
videoplayer.md |
| 图表 | chart |
chart.md |
按名称匹配时写 选择器#控件名称 或 #控件名称(名称与设计器/XML 中一致,如 按钮_确认)。
资源路径 :/
:/ 表示资源约定(相对 exe / 嵌入表),与 YSS 文件本身在 exe 根目录还是子目录无关。
磁盘上的 读文件 / 加载DLL 请写相对工程根(如 "cfg.ini"),不要和 :/ 混用,也不必 合并路径(取程序目录(), …)。
| 写法 | 解析为(exe 在 D:\app\) |
|---|---|
:/img/xx.png |
D:\app\img\xx.png |
:/yss/demo.yss |
D:\app\yss\demo.yss |
yss/demo.yss(相对路径) |
D:\app\yss\demo.yss |
主窗口.yss |
D:\app\主窗口.yss |
示例: YSS 在 exe/yss/demo.yss,图片在 exe/img/xx.png,YSS 内仍写:
indicator-checked-image: :/img/xx.png;
部署(F5 / 发布):
- 工程「资源」目录整棵复制到 exe 旁(
资源/img/a.png→exe旁/img/a.png) - 发布目录
发布/{架构}/{Debug|Release}/同样包含img/、*.yss等样式资源 - 若
exe/img/...不存在,会再尝试兼容旧路径exe/resources/img/...
设计器预览: :/ 解析为工程「资源」目录;打开窗口设计视图时会自动尝试加载 资源/{窗体名}.yss。
窗体(form)选择器
form / window / 主窗口 可写窗体外壳样式(运行时生效):
form {
background-color: #1C1C1E;
background-gradient-color: #2A2A2A; /* 可选:客户区第二色(双色) */
background-gradient: #90CAF9, #B8D9F8, #FFFFFF; /* 或多停(最多 8) */
background-gradient-direction: vertical;
title-bar-color: #0D47A1;
title-bar-gradient-color: #1565C0; /* 标题栏水平渐变第二色 */
border-radius: 16;
title-bar-height: 36;
caption-button-style: macos; /* 或 windows */
show-title-bar: true;
always-on-top: false;
backdrop: acrylic; /* none / acrylic / mica / tabbed */
}
| 属性 | 说明 |
|---|---|
background-color / background |
设置客户区背景色;background 为简写,如 #1C1C1E。 |
background-gradient-color |
设置客户区渐变第二色(与 background-color 组成双色线性渐变;空=纯色)。 |
background-gradient / background-gradient-stops |
设置客户区多停渐变,逗号分隔色(最多 8;会同步首/末到双色槽)。 |
background-gradient-direction |
设置渐变方向:vertical / horizontal(或 垂直 / 水平)。 |
border-radius / corner-radius |
设置窗外框圆角(像素);会裁剪 HWND。 |
border-color / frame-border-color |
设置窗外框边框颜色,如 #007ACC。 |
border-width / frame-border-width |
设置窗外框边框宽度(DIP),如 2。 |
show-border / frame-border |
设为 true 时绘制外边框。 |
title-bar-height |
设置自绘标题栏高度(像素),如 36;仪表盘建议 40。 |
scanlines |
设为 true 时在客户区叠加 CRT 水平扫描线。 |
scanline-color |
扫描线颜色,如 #000000。 |
scanline-opacity |
扫描线不透明度 1–100(默认 6)。 |
scanline-spacing |
扫描线间距像素(约 1–16,默认 2)。 |
fx-rings |
静态同心环底纹:N #color radiusPct,如 5 #00E5FF18 78。 |
fx-phase-ms / particle-field / particle-physics / noise-texture / fx-orbs / pulse-waves / rgb-shift / glow-breathe / fx-blur / fx-blur-live / border-gradient / window-glow |
窗体/控件场景特效;语法见下一节。窗外发光半径上限 10px。 |
opacity / form-opacity / window-opacity |
整窗不透明度 1–100(仅 form)。 |
control-opacity / content-opacity |
全部控件绘制不透明度 1–100(仅 form;不改列表索引/进度值等复用槽)。 |
backdrop-filter |
写在 form 上时:blur(Npx)(N 约 1–64)。通透模式下加重霜雾与底板雾感;glass-compositing: system 时配合系统材质。写在控件上仍为示意高光。 |
glass-compositing / glass-mode |
仅 form:see-through(分层通透,可看穿桌面)/ system(系统亚克力/云母)/ auto(默认:有 opacity 或 backdrop-filter 时走通透)。 |
backdrop-tint-opacity / glass-tint-opacity |
仅 form:通透底板着色强度 1–100;不写则按 opacity / backdrop-filter 自动估算。 |
title-bar-color / caption-color |
设置标题栏底色;空则随客户区。 |
title-bar-gradient-color / caption-gradient-color |
设置标题栏水平渐变第二色;空则纯色。 |
title-bar-image / caption-image |
设置标题栏背景图(铺满标题栏;叠在色/渐变之上)。 |
show-title-bar / title-bar |
设为 true 时显示自绘标题栏。 |
maximize-box / show-maximize / maximize-button |
设为 true 时显示最大化按钮。 |
minimize-box / show-minimize / minimize-button |
设为 true 时显示最小化按钮。 |
close-box / show-close / close-button |
设为 true 时显示关闭按钮。 |
caption-button-style / title-button-style |
设置标题按钮风格:windows 右侧线框,macos 左侧交通灯。 |
backdrop / backdrop-style / background-material |
设置系统材质:none / acrylic(毛玻璃)/ mica(云母)/ tabbed。 |
acrylic |
设为 true 时等价于 backdrop: acrylic。 |
always-on-top / topmost |
设为 true 时窗口置顶。 |
title / window-title |
设置窗口标题文本。 |
visible |
设为 true / false 显示或隐藏窗口。 |
left / top / width / height |
设置窗口位置与外框尺寸(像素)。 |
上表与设计器窗口 XML(最大化按钮、边框色等)对齐,均可在运行时用 YSS / 应用YSS 改写。代码侧也可 主窗口.最大化按钮 = 假 等属性(若支持库已暴露)。
窗体场景特效
语法通式:多数键为三元组
N [#颜色] [速度或半径];写true用默认;写none/0关闭。
仅form生效:particle-field/particle-physics/particle-mode/particle-gravity/fx-orbs/fx-rings/pulse-waves/window-glow/opacity(form-opacity)/control-opacity/ 窗体级backdrop-filter/glass-compositing/backdrop-tint-opacity/ 窗体级noise-texture(写在 button 上会被忽略;button 的outer-glow仍是控件外发光)。
两种毛玻璃用法(勿混用圆角材质耳,见下节):
- 通透玻璃(可看穿桌面):glass-compositing: see-through;+opacity+ 可选backdrop-filter: blur(Npx)+backdrop-tint-opacity;控件再配control-opacity与底板#RRGGBBAA。
- 系统材质:glass-compositing: system;+backdrop-filter: blur(Npx)或backdrop: acrylic|mica;整窗opacity仍可单独淡化。
控件霜面 vs 实时高斯:控件fx-blur/backdrop-filter默认是面板霜雾示意;写fx-blur-live/realtime-blur/gaussian-blur则对窗体底板快照做多通模糊(近似实时高斯)。
纹理噪声:noise-texture(别名film-grain/texture-noise)可写在form或控件上。
不是:真实 3D 网格;「3D」指控件text-3d浮雕字。
form {
/* 动画周期(毫秒),影响粒子/光球/呼吸相位 */
fx-phase-ms: 4800;
/* 粒子场:密度(约 20–200) 颜色(可带 alpha) 速度 */
particle-field: 120 #a8e8ff66 52;
/* 物理粒子(重力/弹性);也可 particle-physics: true 叠在已有 particle-field 上 */
particle-physics: 90 #a8e8ff88 48;
particle-gravity: 42;
/* 窗体胶片噪声:强度 0–100 颜色(可带 alpha) */
noise-texture: 28 #ffffff22;
/* 漂浮光球:数量 颜色 半径 */
fx-orbs: 5 #00e5ff44 36;
/* 同心环:数量 颜色 半径百分比(相对客户区) */
fx-rings: 4 #7c3aed33 72;
/* 窗外发光(亦可写 window-glow / window-glow-color / window-glow-size;半径上限 10px) */
outer-glow: true;
outer-glow-color: #00e5ffaa;
outer-glow-size: 8;
/* 通透玻璃:分层看穿桌面 + 霜雾权重 + 底板着色 */
glass-compositing: see-through;
opacity: 78;
control-opacity: 88;
backdrop-filter: blur(28px);
backdrop-tint-opacity: 48;
/* 若改用系统亚克力(二选一):
glass-compositing: system;
backdrop-filter: blur(24px);
border-radius: 0;
*/
/* 边框呼吸强度 0–100 */
glow-breathe: 42;
/* 脉冲波:层数 颜色 */
pulse-waves: 2 #ff2ec433;
/* 边框多停渐变(叠在 border-color 上) */
border-gradient: #00e5ff88, #7c3aed66, #ff2ec455;
/* 可选:色差偏移 0–8;柔焦 0–32(稀疏样本) */
/* rgb-shift: 2; */
/* fx-blur: 8; */
scanlines: true;
scanline-opacity: 8;
}
控件侧常用视觉键:
button#主 {
outer-glow: true;
outer-glow-color: #00e5ffaa;
outer-glow-size: 12;
skew-x: 10; /* 水平斜切,机甲感 */
background-gradient: #00e5ff, #7c3aed;
}
label#标题 {
text-glow: true;
text-glow-color: #00e5ff;
text-glow-size: 4;
text-3d: true; /* 浮雕字,非真 3D */
}
button#玻璃 {
/* 控件实时高斯(对窗体底板快照模糊;别名 realtime-blur / gaussian-blur) */
fx-blur-live: 16;
noise-texture: 22 #ffffff33;
}
card, groupbox {
box-shadow-layers: 0 0 18 #7c3aed33, 0 6 14 #00000044;
corner-glow: #4ADE80;
corner-brackets: true;
}
/* 半透明卡片 + 毛玻璃高光(`fx-blur` / `backdrop-filter: blur(Npx)`) */
card#面板 {
background-color: #12182acc;
border-radius: 16;
fx-blur: 16;
backdrop-filter: blur(16px);
}
完整样板:窗体主题包与 docs/examples/ 下的 YSS 演示文件。
圆角 + 亚克力(直角耳)
Win10 上 不要同时 开 border-radius > 0 与 backdrop: acrylic|mica:分层圆角窗四角会露出不透明直角「耳朵」。推荐:
- 要自定义圆角霓虹边 →
backdrop: none(或省略),用渐变、粒子、扫描线做氛围 - 要系统毛玻璃 →
border-radius: 0(Win11 可用系统圆角,但不是你写的 14px)
设计器会按「圆角优先」处理冲突;工程里仍建议二选一,避免 XML 残留 背景材质=acrylic。
窗体主题包 vs 手写 YSS
- 从主题商店给当前窗体选用主题:主题规则在前作底,你自己写的规则在后可覆盖
- 「合并应用」保留手写;「整文件替换」会清空用户段
- 可卸载:主题商店 →「移除当前窗体主题」;只去掉主题,手写规则保留
主题变量(:root / var(--*))
:root {
color-scheme: light; /* 或 dark:种子化未手写的 --bg/--fg/--bar 等 */
--accent: #1E88E5;
--cta: #43A047;
}
form {
title-bar-color: var(--accent);
}
button#按钮体检 {
background-color: var(--cta);
color: #FFFFFF;
}
button#按钮体检:hover {
background-color: var(--cta, #66BB6A); /* 可选 fallback */
}
- 仅
:root/root块中以--开头的属性会成为变量 color-scheme: light|dark(也可写在form)会种子化未声明的壳 token:--bg--bg2--fg--muted--accent--accent-deep--title-start--title-end--bar--bar-hover--border--cta--cta-hover--dropdown- 任意属性值可写
var(--name)或var(--name, fallback) - 换肤:另写一套
.yss(改:root/color-scheme)再加载YSS/应用YSS
@import
@import "shell_tokens.yss";
@import url("themes/dark.yss");
form {
title-bar-color: var(--title-start);
}
- 相对路径相对当前.yss 所在目录(资源 URL
:/…也可) - 顶层语句;最多嵌套 8 层;循环引用会被跳过
- 设计器
loadFile与运行时加载YSS均支持
form {
background-color: #2A2A2A;
border-color: #007ACC;
border-width: 2;
maximize-box: false;
caption-button-style: windows;
}
通用属性速查
下表是外壳通用属性清单:各控件按类型取子集使用(并非每个选择器都支持全部键)。按钮、标签、文本框等「富外壳」控件通常可用大半;组合框 / 日期选择器 / 数值微调框等以本表 chrome 键 + 分文档专用键为准;浏览器 / 画布 / 数据表格等往往只有背景与边框。
picturebox 排除文字/字体类: 图片框不支持 color、font-size、font-family、font-bold、font-italic、text-align 及文字渐变/发光/立体字等;运行时会忽略这些键。详见 picturebox.md。具体控件以分文档「属性说明」为准。
| 属性 | 说明 | 典型值 |
|---|---|---|
color |
设置文字(前景)颜色。 | #F5F5F5 |
text-align |
设置文字水平对齐:left / center / right。 |
center |
background |
background-color 的简写。 |
#3E3E42 |
background-color |
设置控件底板背景色。 | #3E3E42 |
border-color |
设置边框颜色。 | #5A5A5A |
border-width |
设置边框宽度(像素)。 | 1 |
border-radius |
设置圆角半径(像素)。 | 6 |
show-border |
设为 true 时绘制边框。 |
true |
transparent-background |
设为 true 时不铺底板色。 |
true |
font-size |
设置字体大小(像素)。 | 14 |
font-family |
设置字体族名称。 | "Microsoft YaHei UI" |
font-bold |
设为 true 时使用粗体。 |
true |
font-italic |
设为 true 时使用斜体。 |
false |
opacity |
设置整体不透明度,范围 0–100。 |
90 |
background-gradient-color |
设置背景渐变第二色(与背景色组成双色渐变)。 | #2A2A2A |
background-gradient |
设置多停色列表(窗体真多停;控件≥3 色真多停)。 | #A,#B,#C |
background-gradient-direction |
设置背景渐变方向:vertical / horizontal。 |
vertical |
text-gradient-color |
设置文字渐变第二色。 | #00BFFF |
text-gradient-direction |
设置文字渐变方向:horizontal / vertical。 |
horizontal |
text-glow |
设为 true 时启用文字发光。 |
true |
text-glow-color |
设置文字发光颜色。 | #00BFFF |
text-glow-size |
设置文字发光半径(像素)。 | 4 |
outer-glow |
设为 true 时启用外发光(控件外轮廓光晕)。 |
true |
outer-glow-color |
设置外发光颜色。 | #007ACC |
outer-glow-size |
设置外发光大小(像素)。 | 5 |
shadow |
设为 true 时启用阴影。 |
true |
shadow-color |
设置阴影颜色。 | #000000 |
shadow-blur |
设置阴影模糊半径;0 且 offset≠0 时自动硬阴影。 |
12 |
shadow-offset-x |
设置阴影水平偏移(像素)。 | 0 |
shadow-offset-y |
设置阴影垂直偏移(像素)。 | 4 |
shadow-style |
阴影风格:soft(柔边,默认)/ hard(不透明偏移,无模糊;新粗野/像素)。 |
hard |
inner-shadow |
设为 true 或颜色时启用内阴影(凹下感);:pressed 可单独设。 |
true |
inner-shadow-color |
内阴影颜色。 | #000000 |
inner-shadow-blur |
内阴影深度(像素,约 0–32)。 |
6 |
box-shadow-layers |
多层外阴影,逗号/分号分隔;每层 ox oy blur #color,可含 inset。 |
0 2 8 #0003, 0 12 24 #0002 |
inner-shadow-layers |
多层内阴影,语法同 box-shadow-layers(默认 inset)。 |
0 1 2 #0004, 0 4 8 #0003 |
clip-corner / clip-corners |
斜切/切角边框:12 或 TL TR BR BL(像素)。 |
10 / 8 12 8 12 |
border-bevel / border-bevel-color |
斜面高光描边颜色。 | #FFFFFF88 |
border-bevel-width |
斜面高光线宽(像素)。 | 1 |
text-3d |
设为 true 时启用立体字效果。 |
true |
text-3d-dark-color |
设置立体字暗部颜色。 | #202020 |
text-3d-depth |
设置立体字深度(像素)。 | 4 |
padding-left / top / right / bottom |
设置单侧内边距(像素)。 | 6 |
hover-color |
设置 :hover 时文字颜色。 |
#FFFFFF |
hover-text-color |
同 hover-color(复选框等别名)。 |
#FFFFFF |
hover-background-color |
设置 :hover 时背景颜色。 |
#008CDC |
pressed-color |
设置 :pressed 时文字颜色。 |
#FFFFFF |
pressed-background-color |
设置 :pressed 时背景颜色。 |
#005A9E |
focus-border-color |
设置 :focus 时边框颜色。 |
#007ACC |
focus-background-color |
设置 :focus 时背景颜色。 |
#1E1E1E |
focus-glow-color |
设置 :focus 时光晕颜色。 |
#007ACC |
disabled-color |
设置 :disabled 时文字颜色。 |
#888888 |
disabled-background-color |
设置 :disabled 时背景颜色。 |
#3A3A3A |
border-style |
边框线型:solid / dashed / dotted / dash-dot / underline(仅底边,按钮等)。 |
solid |
outline-color / outline-width |
设置焦点描边颜色与宽度。 | #007ACC / 2 |
box-shadow |
设为 true 时启用阴影(配合 shadow-*)。 |
true |
边距与内边距
| 属性 | 说明 |
|---|---|
padding |
内边距简写:8 / 8 12 / 8 12 8 12(上 右 下 左)。 |
padding-left / top / right / bottom |
设置内容区单侧内边距(像素)。 |
margin |
外边距简写,语法同 padding。 |
margin-left / top / right / bottom |
设置绘制区域单侧外边距(在控件矩形内缩进背景)。 |
复选框 / 单选框专用(indicator)
分文档:checkbox.md · radiobutton.md。示例样式见 examples/。
| 属性 | 作用 | 范围 / 备注 |
|---|---|---|
indicator-size |
指示器宽高(复选方框边长 / 单选外径) | 8–48 |
indicator-spacing |
指示器与文字间距 | 0–64;pill 忽略 |
indicator-radius |
指示器圆角;单选设后改圆角矩形(0=像素方点) |
0–24 |
indicator-style |
单选:default 圆点 / pill 胶囊选中 / none 隐藏圆点 |
仅 radiobutton |
indicator-background-color |
未选中(或外环)填充色 | #2D2D30 |
indicator-border-color |
指示器描边色 | #707070 |
indicator-checked-background-color |
选中时单色填充(复选;单选方点可用) | #9B6FD0 |
indicator-background-gradient |
选中时指示器渐变(≥2 色,逗号分隔);覆盖单色选中底 | #FFB020, #FF5722 |
checkmark-color |
复选勾号色 | #00CC66 |
mark-color |
单选选中中心点色(勿用 :checked { color } 代替) |
#007ACC |
indeterminate-color |
复选三态不确定横条色 | #FFB020 |
indicator-checked-image / checked-image |
选中态图片 | :/img/on.png |
indicator-unchecked-image / unchecked-image |
未选中态图片 | :/img/off.png |
indicator-indeterminate-image / indeterminate-image |
不确定态图片 | :/img/dash.png |
hover-indicator-border-color |
悬停时指示器边框色 | #0096FF |
hover-indicator-background-color |
悬停时指示器填充色 | #3A3A3E |
伪态注意: 复选 :checked { background-color; color } → 指示器选中底 / 勾号色;单选 :checked { background-color; color } → 外壳(胶囊),圆点用 mark-color。
运行时加载
完整命令签名见 basic-yss.md。
(自动)
- 签名:
— - 说明:窗体启动加载 exe 旁
{窗体名}.yss
加载YSS
- 签名:
逻辑 加载YSS([文本 文件路径=""]) - 说明:从
.yss文件加载并应用到当前窗体;返回真=成功。 - 参数一│[文本 文件路径=”“]: 省略则加载 exe 旁「主窗口.yss」;支持相对 exe 路径与
:/…
应用YSS
- 签名:
逻辑 应用YSS(文本 样式文本) - 说明:将 YSS 规则文本直接应用到当前窗体;推荐
R"(...)"原始字符串。 - 参数一│文本 样式文本: 规则文本;空或格式错误返回假
加载YSS()
加载YSS(":/yss/主题.yss")
加载YSS("yss/demo.yss")
应用YSS(R"(button#按钮1 { background-color: #2ecc71; })")
两层样式机制:
form_yss_ext.bin(F5 自动生成):复选/单选等指示器扩展,启动自动加载- 完整
.yss文件:外壳与控件样式;可用加载YSS()换肤
易错对照
| 错误 | 正确 |
|---|---|
#确定 用按钮标题 |
#按钮1 用 XML「名称」 |
背景色: #fff |
background-color: #FFFFFF; |
YSS 在 yss/ 下写 img/a.png |
写 :/img/a.png |
只拷 exe 不带 .yss/img |
F5/发布目录整棵资源一起带 |
布局控件写 layout { … } 期望生效 |
布局/弹簧不走 YSS |
设计器
- 打开窗口 XML 进入设计视图时,自动尝试加载
资源/{窗体名}.yss或窗口/{窗体名}/{窗体名}.yss - 编辑
.yss文件并保存后,若当前在设计视图且与窗口同名,会即时刷新预览 - 设计器中
:/路径解析为工程「资源」目录
常见问题
Q:F5 后双击发布目录的 exe 没有样式?
A:确认 exe 旁存在 主窗口.yss、img/ 等文件;仅复制 exe 而不带资源无效。Debug 模式也可直接运行编译缓存目录中的 exe(该目录在 F5 时同样会部署资源)。
Q::/img/xx.png 和 YSS 子目录的关系?
A::/ 始终相对 exe 根目录。YSS 在 yss/demo.yss 时,图片仍写 :/img/xx.png,不要写相对于 YSS 文件的路径。
Q:还需要写 加载YSS() 吗?
A:勾选「YSS 自动加载」且 exe 旁有 {窗体名}.yss 时会自动套用;否则请 加载YSS(),或在设计器中套用窗体主题包。
Q:复选框图片不显示?
A:检查 资源/img/... 是否在 F5 后出现在 exe 旁 img/;YSS 中路径是否为 :/img/文件名.png。