自定义样式
自定义样式
SunlightSelect 支持丰富的自定义样式配置，您可以通过 wrapperStyle 对象来自定义选择器的边框、圆角、背景色和聚焦样式等。
自定义边框颜色
您可以自定义选择器的边框颜色和聚焦时的边框颜色。
默认边框颜色
请选择...
自定绿色边框颜色
请选择...
自定蓝色边框颜色
请选择...
自定橙色边框颜色
请选择...
自定红色边框颜色
请选择...
当前选择值：暂无选择
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightSelect } from "sunlight-ui";
// 自定义边框颜色示例数据
const selectValue = ref("");
const options = [
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2' },
{ label: '选项三', value: 'option3' }
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认边框颜色</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">自定绿色边框颜色</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
borderColor: '#67c23a',
focusBorderColor: '#67c23a',
focusBoxShadow: '0 0 0 3px rgba(103, 194, 58, 0.25)'
}
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">自定蓝色边框颜色</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
borderColor: '#409eff',
focusBorderColor: '#409eff',
focusBoxShadow: '0 0 0 3px rgba(64, 158, 255, 0.25)'
}
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">自定橙色边框颜色</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
borderColor: '#e6a23c',
focusBorderColor: '#e6a23c',
focusBoxShadow: '0 0 0 3px rgba(230, 162, 60, 0.25)'
}
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">自定红色边框颜色</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
borderColor: '#f56c6c',
focusBorderColor: '#f56c6c',
focusBoxShadow: '0 0 0 3px rgba(245, 108, 108, 0.25)'
}
}"
/>
</div>
<div style="margin-top: 20px">
<p>当前选择值：{{ selectValue || '暂无选择' }}</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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
隐藏源代码
自定义圆角
您可以通过 borderRadius 属性自定义选择器的圆角大小。
默认圆角 (4px)
请选择...
中等圆角 (8px)
请选择...
大圆角 (16px)
请选择...
圆形 (50px)
请选择...
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightSelect } from "sunlight-ui";
// 自定义圆角示例数据
const selectValue = ref("");
const options = [
{ label: "选项一", value: "option1" },
{ label: "选项二", value: "option2" },
{ label: "选项三", value: "option3" },
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认圆角 (4px)</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
borderRadius: '4px',
},
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">中等圆角 (8px)</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
borderRadius: '8px',
focusBorderColor: '#67c23a',
focusBoxShadow: '0 0 0 3px rgba(103, 194, 58, 0.25)',
},
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">大圆角 (16px)</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
borderRadius: '16px',
focusBorderColor: '#409eff',
focusBoxShadow: '0 0 0 3px rgba(64, 158, 255, 0.25)',
},
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">圆形 (50px)</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
borderRadius: '50px',
borderColor: '#f56c6c',
},
}"
/>
</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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
隐藏源代码
自定义背景色
您可以自定义选择器的背景色，适合不同的主题需求。
默认背景色
请选择...
浅色背景
请选择...
彩色背景
请选择...
深色背景
请选择...
自定义背景色
请选择...
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightSelect } from "sunlight-ui";
// 自定义背景色示例数据
const selectValue = ref("");
const options = [
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2' },
{ label: '选项三', value: 'option3' }
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认背景色</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">浅色背景</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
backgroundColor: '#f5f7fa',
borderColor: '#c0c4cc'
}
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">彩色背景</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
backgroundColor: '#ecf5ff',
borderColor: '#409eff',
focusBorderColor: '#66b1ff'
}
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">深色背景</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
backgroundColor: '#f0f9eb',
borderColor: '#67c23a',
focusBorderColor: '#85ce61'
}
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">自定义背景色</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
borderColor: '#e6a23c',
backgroundColor: '#fdf6ec',
focusBorderColor: '#e6a23c',
focusBoxShadow: '0 0 0 3px rgba(230, 162, 60, 0.25)'
}
}"
/>
</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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
隐藏源代码
自定义聚焦样式
您可以自定义选择器聚焦时的边框颜色和阴影效果。
默认聚焦样式
请选择...
绿色聚焦样式
请选择...
蓝色聚焦样式
请选择...
红色聚焦样式
请选择...
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightSelect } from "sunlight-ui";
// 自定义聚焦样式示例数据
const selectValue = ref("");
const options = [
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2' },
{ label: '选项三', value: 'option3' }
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认聚焦样式</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">绿色聚焦样式</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
focusBorderColor: '#67c23a',
focusBoxShadow: '0 0 0 3px rgba(103, 194, 58, 0.25)'
}
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">蓝色聚焦样式</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
focusBorderColor: '#409eff',
focusBoxShadow: '0 0 0 3px rgba(64, 158, 255, 0.25)'
}
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">红色聚焦样式</div>
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '请选择...',
clearable: true,
options: options,
wrapperStyle: {
focusBorderColor: '#f56c6c',
focusBoxShadow: '0 0 0 3px rgba(245, 108, 108, 0.25)'
}
}"
/>
</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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
隐藏源代码
文档说明
wrapperStyle 配置项
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| borderColor | 选择器边框颜色 | string | '#c0c4cc' |
| borderRadius | 选择器圆角大小，支持像素值和百分比 | string | '4px' |
| backgroundColor | 选择器背景色 | string | 'inherit' |
| boxShadow | 选择器阴影效果 | string | 'inherit' |
| focusBorderColor | 聚焦时边框颜色 | string | '#409eff' |
| focusBoxShadow | 聚焦时阴影效果 | string | '0 0 0 3px rgba(64, 158, 255, 0.15)' |