Skip to main content

主题

经典绿 ( #009688 )

<div id="demo1" class="xm-select-demo"></div>

<script>
var demo1 = xmSelect.render({
el: '#demo1',
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

嫣红 ( #e54d42 )

<div id="demo2" class="xm-select-demo"></div>

<script>
var demo2 = xmSelect.render({
el: '#demo2',
theme: {
color: '#e54d42',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

桔橙 ( #f37b1d )

<div id="demo3" class="xm-select-demo"></div>

<script>
var demo3 = xmSelect.render({
el: '#demo3',
theme: {
color: '#f37b1d',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

明黄 ( #fbbd08 )

<div id="demo4" class="xm-select-demo"></div>

<script>
var demo4 = xmSelect.render({
el: '#demo4',
theme: {
color: '#fbbd08',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

橄榄 ( #8dc63f )

<div id="demo5" class="xm-select-demo"></div>

<script>
var demo5 = xmSelect.render({
el: '#demo5',
theme: {
color: '#8dc63f',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

天青 ( #1cbbb4 )

<div id="demo6" class="xm-select-demo"></div>

<script>
var demo6 = xmSelect.render({
el: '#demo6',
theme: {
color: '#1cbbb4',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

海蓝 ( #0081ff )

<div id="demo7" class="xm-select-demo"></div>

<script>
var demo7 = xmSelect.render({
el: '#demo7',
theme: {
color: '#0081ff',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

姹紫 ( #6739b6 )

<div id="demo8" class="xm-select-demo"></div>

<script>
var demo8 = xmSelect.render({
el: '#demo8',
theme: {
color: '#6739b6',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

木槿 ( #9c26b0 )

<div id="demo9" class="xm-select-demo"></div>

<script>
var demo9 = xmSelect.render({
el: '#demo9',
theme: {
color: '#9c26b0',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

桃粉 ( #e03997 )

<div id="demo10" class="xm-select-demo"></div>

<script>
var demo10 = xmSelect.render({
el: '#demo10',
theme: {
color: '#e03997',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

棕褐 ( #a5673f )

<div id="demo11" class="xm-select-demo"></div>

<script>
var demo11 = xmSelect.render({
el: '#demo11',
theme: {
color: '#a5673f',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

玄灰 ( #8799a3 )

<div id="demo12" class="xm-select-demo"></div>

<script>
var demo12 = xmSelect.render({
el: '#demo12',
theme: {
color: '#8799a3',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

草灰 ( #aaaaaa )

<div id="demo13" class="xm-select-demo"></div>

<script>
var demo13 = xmSelect.render({
el: '#demo13',
theme: {
color: '#aaaaaa',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

墨黑 ( #333333 )

<div id="demo14" class="xm-select-demo"></div>

<script>
var demo14 = xmSelect.render({
el: '#demo14',
theme: {
color: '#333333',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>
warning

颜色值来源于ColorUI, 有兴趣的可以看看