自定义样式
自定义样式
SunlightCascader 支持丰富的自定义样式配置，您可以通过 wrapperStyle 对象来自定义级联选择器的边框、圆角、背景色和聚焦样式等。
自定义边框颜色
您可以自定义级联选择器的边框颜色和聚焦时的边框颜色。
默认边框颜色
自定义绿色边框颜色
自定义蓝色边框颜色
自定义橙色边框颜色
自定义红色边框颜色
选择的值: 暂无选择
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightCascader } from "sunlight-ui";
const cascaderValue = ref("");
const options = [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{ value: 'yizhi', label: '一致' },
{ value: 'fankui', label: '反馈' },
{ value: 'xiaolu', label: '效率' }
]
},
{
value: 'daohang',
label: '导航',
children: [
{ value: 'cexiangdaohang', label: '侧向导航' },
{ value: 'dingbudaohang', label: '顶部导航' }
]
}
]
},
{
value: 'zujian',
label: '组件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{ value: 'layout', label: 'Layout 布局' },
{ value: 'color', label: 'Color 色彩' }
]
},
{
value: 'form',
label: 'Form',
children: [
{ value: 'radio', label: 'Radio 单选框' },
{ value: 'checkbox', label: 'Checkbox 多选框' }
]
}
]
}
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认边框颜色</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">自定义绿色边框颜色</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
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>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
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>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
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>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
wrapperStyle: {
borderColor: '#f56c6c',
focusBorderColor: '#f56c6c',
focusBoxShadow: '0 0 0 3px rgba(245, 108, 108, 0.25)'
}
}"
/>
</div>
<div style="margin-top: 20px">
<p>选择的值: {{ cascaderValue || "暂无选择" }}</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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
隐藏源代码
自定义圆角
您可以通过 borderRadius 属性自定义级联选择器的圆角大小。
默认圆角 (4px)
中等圆角 (8px)
大圆角 (16px)
圆形 (50px)
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightCascader } from "sunlight-ui";
const cascaderValue = ref("");
const options = [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{ value: 'yizhi', label: '一致' },
{ value: 'fankui', label: '反馈' },
{ value: 'xiaolu', label: '效率' }
]
},
{
value: 'daohang',
label: '导航',
children: [
{ value: 'cexiangdaohang', label: '侧向导航' },
{ value: 'dingbudaohang', label: '顶部导航' }
]
}
]
},
{
value: 'zujian',
label: '组件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{ value: 'layout', label: 'Layout 布局' },
{ value: 'color', label: 'Color 色彩' }
]
},
{
value: 'form',
label: 'Form',
children: [
{ value: 'radio', label: 'Radio 单选框' },
{ value: 'checkbox', label: 'Checkbox 多选框' }
]
}
]
}
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认圆角 (4px)</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
wrapperStyle: {
borderRadius: '4px'
}
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">中等圆角 (8px)</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
wrapperStyle: {
borderRadius: '8px',
focusBorderColor: '#67c23a',
focusBoxShadow: '0 0 0 3px rgba(103, 194, 58, 0.25)'
}
}"
theme="primary"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">大圆角 (16px)</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
wrapperStyle: {
borderRadius: '16px',
focusBorderColor: '#409eff',
focusBoxShadow: '0 0 0 3px rgba(64, 158, 255, 0.25)'
}
}"
theme="success"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">圆形 (50px)</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
wrapperStyle: {
borderRadius: '50px',
borderColor: '#f56c6c'
}
}"
theme="warning"
/>
</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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
隐藏源代码
自定义背景色
您可以自定义级联选择器的背景色，适合不同的主题需求。
默认背景色
浅色背景
彩色背景
深色背景
自定义背景色
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightCascader } from "sunlight-ui";
const cascaderValue = ref("");
const options = [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{ value: 'yizhi', label: '一致' },
{ value: 'fankui', label: '反馈' },
{ value: 'xiaolu', label: '效率' }
]
},
{
value: 'daohang',
label: '导航',
children: [
{ value: 'cexiangdaohang', label: '侧向导航' },
{ value: 'dingbudaohang', label: '顶部导航' }
]
}
]
},
{
value: 'zujian',
label: '组件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{ value: 'layout', label: 'Layout 布局' },
{ value: 'color', label: 'Color 色彩' }
]
},
{
value: 'form',
label: 'Form',
children: [
{ value: 'radio', label: 'Radio 单选框' },
{ value: 'checkbox', label: 'Checkbox 多选框' }
]
}
]
}
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认背景色</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">浅色背景</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
wrapperStyle: {
backgroundColor: '#f5f7fa',
borderColor: '#c0c4cc'
}
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">彩色背景</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
wrapperStyle: {
backgroundColor: '#ecf5ff',
borderColor: '#409eff',
focusBorderColor: '#66b1ff'
}
}"
theme="primary"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">深色背景</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
wrapperStyle: {
backgroundColor: '#f0f9eb',
borderColor: '#67c23a',
focusBorderColor: '#85ce61'
}
}"
theme="success"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">自定义背景色</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
wrapperStyle: {
borderColor: '#e6a23c',
backgroundColor: '#fdf6ec',
focusBorderColor: '#e6a23c',
focusBoxShadow: '0 0 0 3px rgba(230, 162, 60, 0.25)'
}
}"
theme="warning"
/>
</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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
隐藏源代码
自定义聚焦样式
您可以自定义级联选择器聚焦时的边框颜色和阴影效果。
默认聚焦样式
绿色聚焦样式
蓝色聚焦样式
红色聚焦样式
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightCascader } from "sunlight-ui";
const cascaderValue = ref("");
const options = [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{ value: 'yizhi', label: '一致' },
{ value: 'fankui', label: '反馈' },
{ value: 'xiaolu', label: '效率' }
]
},
{
value: 'daohang',
label: '导航',
children: [
{ value: 'cexiangdaohang', label: '侧向导航' },
{ value: 'dingbudaohang', label: '顶部导航' }
]
}
]
},
{
value: 'zujian',
label: '组件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{ value: 'layout', label: 'Layout 布局' },
{ value: 'color', label: 'Color 色彩' }
]
},
{
value: 'form',
label: 'Form',
children: [
{ value: 'radio', label: 'Radio 单选框' },
{ value: 'checkbox', label: 'Checkbox 多选框' }
]
}
]
}
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认聚焦样式</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">绿色聚焦样式</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
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>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
wrapperStyle: {
focusBorderColor: '#409eff',
focusBoxShadow: '0 0 0 3px rgba(64, 158, 255, 0.25)'
}
}"
theme="primary"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">红色聚焦样式</div>
<SunlightCascader
v-model="cascaderValue"
:item="{
placeholder: '请选择内容...',
clearable: true,
options: options,
showAllLevels: true,
wrapperStyle: {
focusBorderColor: '#f56c6c',
focusBoxShadow: '0 0 0 3px rgba(245, 108, 108, 0.25)'
}
}"
theme="danger"
/>
</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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
隐藏源代码
文档说明
自定义样式概述
SunlightCascader 提供了强大的自定义样式能力，通过 wrapperStyle 对象可以灵活配置级联选择器的各种样式属性，实现完全自定义的视觉效果。
wrapperStyle 配置项
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| borderColor | 级联选择器边框颜色 | string | '#c0c4cc' |
| borderRadius | 级联选择器圆角大小，支持像素值和百分比 | string | '4px' |
| backgroundColor | 级联选择器背景色 | string | '#ffffff' |
| boxShadow | 级联选择器阴影效果 | string | 'none' |
| focusBorderColor | 聚焦时边框颜色 | string | '#409eff' |
| focusBoxShadow | 聚焦时阴影效果 | string | '0 0 0 3px rgba(64, 158, 255, 0.15)' |