标签 Tag ​

<template>
    <tm-app>
        <tm-sheet>
            <tm-text :font-size="30" _class="font-weight-b" label="基础示例,更多见文档"></tm-text>
            <tm-divider></tm-divider>
            <view class="flex-row flex flex-wrap">
                <tm-tag size="xs" label="标签"></tm-tag>
                <tm-tag color="green" size="s" label="标签"></tm-tag>
                <tm-tag color="orange" size="m" label="标签"></tm-tag>
                <tm-tag color="red" size="n" label="标签"></tm-tag>
                <tm-tag color="blue" size="g" label="标签"></tm-tag>
            </view>
        </tm-sheet>
        <tm-sheet>
            <tm-text :font-size="30" _class="font-weight-b" label="允许关闭"></tm-text>
            <tm-divider></tm-divider>
            <view class="flex-row flex flex-wrap">
                <tm-tag closable size="n" label="标签"></tm-tag>
                <tm-tag closable color="green" size="n" label="标签"></tm-tag>
                <tm-tag closable color="orange" size="n" label="标签"></tm-tag>
                <tm-tag closable color="red" size="n" label="标签"></tm-tag>
            </view>
        </tm-sheet>
        <tm-sheet>
            <tm-text :font-size="30" _class="font-weight-b" label="放置图标，一些其它属性"></tm-text>
            <tm-divider></tm-divider>
            <view class="flex-row flex flex-wrap">
                <tm-tag text :shadow="0" icon="tmicon-weixinzhifu" color="orange" size="m" label="标签"></tm-tag>
                <tm-tag text :shadow="0" color="red" size="m" label="标签"></tm-tag>
                <tm-tag text outlined :shadow="0" color="red" size="m" label="浅边框"></tm-tag>
                <tm-tag outlined :shadow="0" color="red" size="m" label="深边框"></tm-tag>
                <tm-tag outlined :shadow="0" color="grey" font-color="black" border-color="black" size="m" label="自定边框"></tm-tag>
                <tm-tag :round="10" text :border="1" borderStyle="dashed" :shadow="0" color="red" size="m" label="标签">
                </tm-tag>
                <tm-tag load text :border="1" borderStyle="dashed" :shadow="0" color="green" size="m" label="加载中">
                </tm-tag>
            </view>
        </tm-sheet>
        <tm-sheet>
            <tm-text :font-size="30" _class="font-weight-b" label="设置为可选状态"></tm-text>
            <tm-divider></tm-divider>
            <view class="flex-row flex flex-wrap">
                <tm-tag checkable color="orange" size="n" label="点我切换选中"></tm-tag>

            </view>
        </tm-sheet>
    </tm-app>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmTag from "@/tmui/components/tm-tag/tm-tag.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
const tabsTitle = ref([
    { key: "1", title: "选项1", icon: "tmicon-ios-leaf" },
    { key: "2", title: "选项2", icon: "tmicon-ios-umbrella" },
    { key: "3", title: "选项3", icon: "tmicon-ios-rocket" },
    { key: "4", title: "选项4", icon: "tmicon-ios-partly-sunny" },
])

function tabschange(key: string | number) {
    console.log(key)
}
</script>