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