From 78a22d40eb08f4915eb21783c422f7654e7007ba Mon Sep 17 00:00:00 2001 From: sakurayinfei <970412446@qq.com> Date: Mon, 8 Sep 2025 14:48:04 +0800 Subject: [PATCH] =?UTF-8?q?feat(doc):=20checkbox=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0css=E5=8F=98=E9=87=8F=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/checkbox/__docs__/index.en-US.md | 36 +++++++++++++++++++ .../src/checkbox/__docs__/index.zh-CN.md | 36 +++++++++++++++++++ 2 files changed, 72 insertions(+) diff --git a/packages/opendesign/src/checkbox/__docs__/index.en-US.md b/packages/opendesign/src/checkbox/__docs__/index.en-US.md index c83f9f85..094290bf 100644 --- a/packages/opendesign/src/checkbox/__docs__/index.en-US.md +++ b/packages/opendesign/src/checkbox/__docs__/index.en-US.md @@ -12,5 +12,41 @@ sidebar: OCheckbox ## API +### CSS Variables (OCheckbox) + +| CSS Variable | Description | +| --- | --- | +| \-\-checkbox-text-size | Font size of the label | +| \-\-checkbox-text-height | Line height of the label text | +| \-\-checkbox-label-gap | Spacing between the checkbox and the label | +| \-\-checkbox-align | Alignment of the checkbox and label (`align-items` property value) | +| \-\-checkbox-color | Text color of the label | +| \-\-checkbox-color-disabled | Text color of the label (disabled) | +| \-\-checkbox-radius | Border radius of the checkbox icon | +| \-\-checkbox-input-wrap-size | Size of the checkbox icon's parent container | +| \-\-checkbox-input-size | Size of the checkbox icon | +| \-\-checkbox-input-bg-color | Background color of the checkbox icon | +| \-\-checkbox-input-bg-color-disabled | Background color of the checkbox icon (disabled) | +| \-\-checkbox-input-bg-color-checked | Background color of the checkbox icon (checked) | +| \-\-checkbox-input-bg-color-checked-hover | Background color of the checkbox icon (checked and hover) | +| \-\-checkbox-input-bg-color-checked-active | Background color of the checkbox icon (checked and active) | +| \-\-checkbox-input-bg-color-checked-disabled | Background color of the checkbox icon (checked and disabled) | +| \-\-checkbox-input-bd-color | Border color of the checkbox icon | +| \-\-checkbox-input-bd-color-hover | Border color of the checkbox icon (hover) | +| \-\-checkbox-input-bd-color-active | Border color of the checkbox icon (active) | +| \-\-checkbox-input-bd-color-disabled | Border color of the checkbox icon (disabled) | +| \-\-checkbox-input-bd-color-checked | Border color of the checkbox icon (checked) | +| \-\-checkbox-input-bd-color-checked-hover | Border color of the checkbox icon (checked and hover) | +| \-\-checkbox-input-bd-color-checked-active | Border color of the checkbox icon (checked and active) | +| \-\-checkbox-input-bd-color-checked-disabled | Border color of the checkbox icon (checked and disabled) | +| \-\-checkbox-input-icon-size | Size of the checkbox ✔ icon | +| \-\-checkbox-input-icon-color | Color of the checkbox ✔ icon | + +### CSS Variables (OCheckboxGroup) + +| CSS Variable | Description | +| --- | --- | +| \-\-checkbox-group-gap | Spacing between elements in the checkbox group | + diff --git a/packages/opendesign/src/checkbox/__docs__/index.zh-CN.md b/packages/opendesign/src/checkbox/__docs__/index.zh-CN.md index 8ccb1f0d..3cd2ae67 100644 --- a/packages/opendesign/src/checkbox/__docs__/index.zh-CN.md +++ b/packages/opendesign/src/checkbox/__docs__/index.zh-CN.md @@ -12,5 +12,41 @@ sidebar: OCheckbox 多选框 ## API +### CSS 变量（OCheckbox） + +| CSS 变量 | 描述 | +| --- | --- | +| \-\-checkbox-text-size | 标签字号 | +| \-\-checkbox-text-height | 标签文本行高 | +| \-\-checkbox-label-gap | 多选框与标签之间的间距 | +| \-\-checkbox-align | 多选框与标签的对齐方式（`align-items` 属性值） | +| \-\-checkbox-color | 标签文字颜色 | +| \-\-checkbox-color-disabled | 标签文字颜色（禁用） | +| \-\-checkbox-radius | 多选框图标圆角 | +| \-\-checkbox-input-wrap-size | 多选框图标父容器尺寸 | +| \-\-checkbox-input-size | 多选框图标尺寸 | +| \-\-checkbox-input-bg-color | 多选框图标背景色 | +| \-\-checkbox-input-bg-color-disabled | 多选框图标背景色（禁用） | +| \-\-checkbox-input-bg-color-checked | 多选框图标背景色（选中） | +| \-\-checkbox-input-bg-color-checked-hover | 多选框图标背景色（选中且hover） | +| \-\-checkbox-input-bg-color-checked-active | 多选框图标背景色（选中且激活） | +| \-\-checkbox-input-bg-color-checked-disabled | 多选框图标背景色（选中且禁用） | +| \-\-checkbox-input-bd-color | 多选框图标边框色 | +| \-\-checkbox-input-bd-color-hover | 多选框图标边框色（hover） | +| \-\-checkbox-input-bd-color-active | 多选框图标边框色（激活） | +| \-\-checkbox-input-bd-color-disabled | 多选框图标边框色（禁用） | +| \-\-checkbox-input-bd-color-checked | 多选框图标边框色（选中） | +| \-\-checkbox-input-bd-color-checked-hover | 多选框图标边框色（选中且hover） | +| \-\-checkbox-input-bd-color-checked-active | 多选框图标边框色（选中且激活） | +| \-\-checkbox-input-bd-color-checked-disabled | 多选框图标边框色（选中且禁用） | +| \-\-checkbox-input-icon-size | 多选框 ✔ 图标尺寸 | +| \-\-checkbox-input-icon-color | 多选框 ✔ 图标颜色 | + +### CSS 变量（OCheckboxGroup） + +| CSS 变量 | 描述 | +| --- | --- | +| \-\-checkbox-group-gap | 多选框组元素之间的间距 | + -- Gitee