<template>
    <div class="ht-base-tag-color-demo">
        <div>
            <ht-base-tag color="default" type="border">default</ht-base-tag>
            <ht-base-tag color="primary">primary</ht-base-tag>
            <ht-base-tag color="success">success</ht-base-tag>
            <ht-base-tag color="error">error</ht-base-tag>
            <ht-base-tag color="warning">warning</ht-base-tag>
            <ht-base-tag color="magenta">magenta</ht-base-tag>
            <ht-base-tag color="red">red</ht-base-tag>
            <ht-base-tag color="volcano">volcano</ht-base-tag>
            <ht-base-tag color="orange">orange</ht-base-tag>
            <ht-base-tag color="gold">gold</ht-base-tag>
            <ht-base-tag color="yellow">yellow</ht-base-tag>
            <ht-base-tag color="lime">lime</ht-base-tag>
            <ht-base-tag color="green">green</ht-base-tag>
            <ht-base-tag color="cyan">cyan</ht-base-tag>
            <ht-base-tag color="blue">blue</ht-base-tag>
            <ht-base-tag color="geekblue">geekblue</ht-base-tag>
            <ht-base-tag color="purple">purple</ht-base-tag>
            <ht-base-tag color="#FFA2D3">Custom Color</ht-base-tag>
        </div>
        <br><br>
        <ht-base-tag type="border" closable color="primary">标签一</ht-base-tag>
        <ht-base-tag type="border" closable color="success">标签二</ht-base-tag>
        <ht-base-tag type="border" closable color="error">标签三</ht-base-tag>
        <ht-base-tag type="border" closable color="warning">标签四</ht-base-tag>
        <br><br>
        <ht-base-tag type="dot" closable color="primary">标签一</ht-base-tag>
        <ht-base-tag type="dot" closable color="success">标签二</ht-base-tag>
        <ht-base-tag type="dot" closable color="error">标签三</ht-base-tag>
        <ht-base-tag type="dot" closable color="warning">标签四</ht-base-tag>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseTagColorDemo',
    }
</script>
<style lang="less">
    .ht-base-tag-color-demo {
        .ht-base-tag {
            margin-bottom: 10px;
        }
    }
</style>

