自定义样式
自定义样式
SunlightDatePicker 支持丰富的自定义样式配置，您可以通过 wrapperStyle 对象来自定义日期选择器的边框、圆角、背景色和聚焦样式等。
自定义边框颜色
您可以自定义日期选择器的边框颜色和聚焦时的边框颜色。
默认边框颜色
自定绿色边框颜色
自定蓝色边框颜色
自定橙色边框颜色
自定红色边框颜色
选中日期：暂无选择
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightDatePicker } from "sunlight-ui";
const dateValue = ref("");
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认边框颜色</div>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">自定绿色边框颜色</div>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
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>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
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>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
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>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
wrapperStyle: {
borderColor: '#f56c6c',
focusBorderColor: '#f56c6c',
focusBoxShadow: '0 0 0 3px rgba(245, 108, 108, 0.25)'
}
}"
/>
</div>
<div style="margin-top: 20px;">
<p>选中日期：{{ dateValue || '暂无选择' }}</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
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
隐藏源代码
自定义圆角
您可以通过 borderRadius 属性自定义日期选择器的圆角大小。
默认圆角 (4px)
中等圆角 (8px)
大圆角 (16px)
圆形 (50px)
选中日期：暂无选择
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightDatePicker } from "sunlight-ui";
const dateValue = ref("");
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认圆角 (4px)</div>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
wrapperStyle: {
borderRadius: '4px',
},
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">中等圆角 (8px)</div>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
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>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
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>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
wrapperStyle: {
borderRadius: '50px',
borderColor: '#f56c6c',
},
}"
/>
</div>
<div style="margin-top: 20px;">
<p>选中日期：{{ dateValue || '暂无选择' }}</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
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
隐藏源代码
自定义背景色
您可以自定义日期选择器的背景色，适合不同的主题需求。
默认背景色
浅色背景
彩色背景
深色背景
自定义背景色
选中日期：暂无选择
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightDatePicker } from "sunlight-ui";
const dateValue = ref("");
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认背景色</div>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">浅色背景</div>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
wrapperStyle: {
backgroundColor: '#f5f7fa',
borderColor: '#c0c4cc',
},
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">彩色背景</div>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
wrapperStyle: {
backgroundColor: '#ecf5ff',
borderColor: '#409eff',
focusBorderColor: '#66b1ff',
},
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">深色背景</div>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
wrapperStyle: {
backgroundColor: '#f0f9eb',
borderColor: '#67c23a',
focusBorderColor: '#85ce61',
},
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">自定义背景色</div>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
wrapperStyle: {
borderColor: '#e6a23c',
backgroundColor: '#fdf6ec',
focusBorderColor: '#e6a23c',
focusBoxShadow: '0 0 0 3px rgba(230, 162, 60, 0.25)',
},
}"
/>
</div>
<div style="margin-top: 20px;">
<p>选中日期：{{ dateValue || '暂无选择' }}</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
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
隐藏源代码
自定义聚焦样式
您可以自定义日期选择器聚焦时的边框颜色和阴影效果。
默认聚焦样式
绿色聚焦样式
蓝色聚焦样式
红色聚焦样式
选中日期：暂无选择
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightDatePicker } from "sunlight-ui";
const dateValue = ref("");
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认聚焦样式</div>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">绿色聚焦样式</div>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
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>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
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>
<SunlightDatePicker
v-model="dateValue"
:item="{
placeholder: '请选择日期...',
wrapperStyle: {
focusBorderColor: '#f56c6c',
focusBoxShadow: '0 0 0 3px rgba(245, 108, 108, 0.25)',
},
}"
/>
</div>
<div style="margin-top: 20px;">
<p>选中日期：{{ dateValue || '暂无选择' }}</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
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
隐藏源代码
文档说明
自定义样式概述
SunlightDatePicker 提供了强大的自定义样式能力，通过 wrapperStyle 对象可以灵活配置日期选择器的各种样式属性，实现完全自定义的视觉效果。
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)' |
样式配置要点
- 边框样式：通过
borderColor和focusBorderColor配置边框颜色 - 圆角设计：使用
borderRadius控制圆角大小，支持像素值和百分比 - 背景色：通过
backgroundColor设置日期选择器背景色，适合不同主题 - 聚焦效果：
focusBorderColor和focusBoxShadow控制聚焦状态样式 - 阴影效果：
boxShadow可添加自定义阴影