xm-select/docs/mds/XM12.md

主题

经典绿 ( #009688 )

:::demo

<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 )

:::demo

<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 )

:::demo

<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 )

:::demo

<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 )

:::demo

<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 )

:::demo

<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 )

:::demo

<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 )

:::demo

<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 )

:::demo

<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 )

:::demo

<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 )

:::demo

<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 )

:::demo

<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 )

:::demo

<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 )

:::demo

<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, 有兴趣的可以看看 :::