自定义样式
自定义样式
SunlightInput 支持丰富的自定义样式配置，您可以通过 wrapperStyle 对象来自定义输入框的边框、圆角、背景色和聚焦样式等。
自定义边框颜色
您可以自定义输入框的边框颜色和聚焦时的边框颜色。
默认边框颜色
自定绿色边框颜色
自定蓝色边框颜色
自定橙色边框颜色
自定红色边框颜色
输入的值: 暂无输入
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightInput } from "sunlight-ui";
const inputValue = ref("");
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认边框颜色</div>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: true,
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">自定绿色边框颜色</div>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: 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>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: 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>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: 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>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: true,
wrapperStyle: {
borderColor: '#f56c6c',
focusBorderColor: '#f56c6c',
focusBoxShadow: '0 0 0 3px rgba(245, 108, 108, 0.25)',
},
}"
/>
</div>
<div style="margin-top: 20px">
<p>输入的值: {{ inputValue || "暂无输入" }}</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
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
隐藏源代码
自定义圆角
您可以通过 borderRadius 属性自定义输入框的圆角大小。
默认圆角 (4px)
中等圆角 (8px)
大圆角 (16px)
圆形 (50px)
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightInput } from "sunlight-ui";
const inputValue = ref("");
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认圆角 (4px)</div>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: true,
wrapperStyle: {
borderRadius: '4px',
},
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">中等圆角 (8px)</div>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: 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>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: 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>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '搜索...',
clearable: true,
prefixIcon: 'Search',
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
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
隐藏源代码
自定义背景色
您可以自定义输入框的背景色，适合不同的主题需求。
默认背景色
浅色背景
彩色背景
深色背景
自定义背景色
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightInput } from "sunlight-ui";
const inputValue = ref("");
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认背景色</div>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: true,
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">浅色背景</div>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: true,
wrapperStyle: {
backgroundColor: '#f5f7fa',
borderColor: '#c0c4cc',
},
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">彩色背景</div>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: true,
wrapperStyle: {
backgroundColor: '#ecf5ff',
borderColor: '#409eff',
focusBorderColor: '#66b1ff',
},
}"
theme="primary"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">深色背景</div>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: true,
wrapperStyle: {
backgroundColor: '#f0f9eb',
borderColor: '#67c23a',
focusBorderColor: '#85ce61',
},
}"
theme="success"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">自定义背景色</div>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: 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
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
隐藏源代码
自定义聚焦样式
您可以自定义输入框聚焦时的边框颜色和阴影效果。
默认聚焦样式
绿色聚焦样式
蓝色聚焦样式
红色聚焦样式
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightInput } from "sunlight-ui";
const inputValue = ref("");
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">默认聚焦样式</div>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: true,
}"
/>
</div>
<div style="margin-bottom: 20px">
<div style="margin-bottom: 8px">绿色聚焦样式</div>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: 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>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: 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>
<SunlightInput
v-model="inputValue"
:item="{
placeholder: '请输入内容...',
clearable: 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
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
隐藏源代码
文档说明
自定义样式概述
SunlightInput 提供了强大的自定义样式能力，通过 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)' |