自定义样式
自定义样式
SunlightCheckbox 支持丰富的自定义样式配置，您可以通过 wrapperStyle 对象来自定义复选框的边框颜色、聚焦样式和选中样式等。
样式 - 自定义绿色
自定义绿色样式，适合成功状态或积极操作。
选中值：[ "option1", "option3" ]
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightCheckbox } from "sunlight-ui";
const checkboxValue = ref(["option1", "option3"]);
const options = [
{ label: "选项一", value: "option1" },
{ label: "选项二", value: "option2" },
{ label: "选项三", value: "option3" },
{ label: "选项四", value: "option4" },
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<SunlightCheckbox
v-model="checkboxValue"
:item="{
options: options,
wrapperStyle: {
borderColor: '#c0c4cc',
focusBorderColor: '#67c23a',
focusBoxShadowColor: 'rgba(103, 194, 58, 0.1)',
},
}"
/>
</div>
<div style="margin-top: 20px">
<p>选中值：{{ checkboxValue || "暂无选择" }}</p>
</div>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
隐藏源代码
样式 - 自定义蓝色
蓝色主题样式，适合主要操作或默认状态。
选中值：[ "option1", "option3" ]
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightCheckbox } from "sunlight-ui";
const checkboxValue = ref(["option1", "option3"]);
const options = [
{ label: "选项一", value: "option1" },
{ label: "选项二", value: "option2" },
{ label: "选项三", value: "option3" },
{ label: "选项四", value: "option4" },
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<SunlightCheckbox
v-model="checkboxValue"
:item="{
options: options,
wrapperStyle: {
borderColor: '#c0c4cc',
focusBorderColor: '#409eff',
focusBoxShadowColor: 'rgba(64, 158, 255, 0.1)',
},
}"
/>
</div>
<div style="margin-top: 20px">
<p>选中值：{{ checkboxValue || "暂无选择" }}</p>
</div>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
隐藏源代码
样式 - 自定义橙色
橙色主题样式，适合警告或提醒状态。
选中值：[ "option1", "option3" ]
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightCheckbox } from "sunlight-ui";
const checkboxValue = ref(["option1", "option3"]);
const options = [
{ label: "选项一", value: "option1" },
{ label: "选项二", value: "option2" },
{ label: "选项三", value: "option3" },
{ label: "选项四", value: "option4" },
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<SunlightCheckbox
v-model="checkboxValue"
:item="{
options: options,
wrapperStyle: {
borderColor: '#c0c4cc',
focusBorderColor: '#e6a23c',
focusBoxShadowColor: 'rgba(230, 162, 60, 0.1)',
},
}"
/>
</div>
<div style="margin-top: 20px">
<p>选中值：{{ checkboxValue || "暂无选择" }}</p>
</div>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
隐藏源代码
样式 - 自定义红色
红色主题样式，适合错误或危险状态。
选中值：[ "option1", "option3" ]
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightCheckbox } from "sunlight-ui";
const checkboxValue = ref(["option1", "option3"]);
const options = [
{ label: "选项一", value: "option1" },
{ label: "选项二", value: "option2" },
{ label: "选项三", value: "option3" },
{ label: "选项四", value: "option4" },
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<SunlightCheckbox
v-model="checkboxValue"
:item="{
options: options,
wrapperStyle: {
borderColor: '#c0c4cc',
focusBorderColor: '#f56c6c',
focusBoxShadowColor: 'rgba(245, 108, 108, 0.1)',
},
}"
/>
</div>
<div style="margin-top: 20px">
<p>选中值：{{ checkboxValue || "暂无选择" }}</p>
</div>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
隐藏源代码
文档说明
自定义样式概述
SunlightCheckbox 提供了强大的自定义样式能力，通过 wrapperStyle 对象可以灵活配置复选框的各种样式属性，实现完全自定义的视觉效果。
wrapperStyle 配置项
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| borderColor | 复选框边框颜色 | string | '#c0c4cc' |
| focusBorderColor | 聚焦时边框颜色 | string | '#409eff' |
| focusBoxShadowColor | 聚焦时阴影颜色 | string | 'rgba(64, 158, 255, 0.1)' |