Tag

<script setup lang="ts">
    import { Space, Tag, type TagCloseEvent } from '@fibrous/semi-ui-vue';

    const preventClose = (event: TagCloseEvent) => event.preventDefault();
</script>

<template>
    <div>
        <Space>
            <Tag>default tag</Tag>
            <Tag closable>Closable Tag</Tag>
            <Tag closable @close="preventClose">Closable Tag, Prevent Default</Tag>
        </Space>
    </div>
</template>

<script setup lang="ts">
    import { Space, Tag } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Space>
        <Tag color="light-blue" size="small">small tag</Tag>
        <Tag color="cyan" size="large">large tag</Tag>
    </Space>
</template>

<script setup lang="ts">
    import { Space, Tag } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Space>
        <Tag color="amber" shape="circle" size="small">small circle tag</Tag>
        <Tag color="violet" shape="circle" size="large">large circle tag</Tag>
    </Space>
</template>

<script setup lang="ts">
    import { IconGithubLogo, IconSemiLogo } from '@fibrous/semi-icons-vue';
    import { Space, Tag } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Space>
        <Tag color="light-blue" shape="circle" size="large">
            <template #prefixIcon>
                <IconGithubLogo />
            </template>
            Semi Design
        </Tag>
        <Tag color="cyan" shape="circle" size="large">
            D2C: figma to code in one click
            <template #suffixIcon>
                <IconSemiLogo />
            </template>
        </Tag>
    </Space>
</template>

<script setup lang="ts">
    import { Space, Tag, type TagColor } from '@fibrous/semi-ui-vue';

    const colors: TagColor[] = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'light-green', 'lime', 'orange', 'pink', 'purple', 'red', 'teal', 'violet', 'yellow', 'white'];
</script>

<template>
    <Space wrap>
        <Tag v-for="color in colors" :key="color" :color="color">{{ color }}</Tag>
    </Space>
</template>

<script setup lang="ts">
    import { IconAIFilledLevel1, IconAIFilledLevel3 } from '@fibrous/semi-icons-vue';
    import { Tag } from '@fibrous/semi-ui-vue';

    const grid = { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gridGap: '10px', width: 'fit-content' };
</script>

<template>
    <div :style="{ display: 'flex', flexDirection: 'column', rowGap: '30px' }">
        <div :style="grid">
            <Tag colorful gradient shape="circle" type="solid">
                <template #prefixIcon>
                    <IconAIFilledLevel1 size="small" />
                </template>
                AI
            </Tag>
            <Tag colorful gradient shape="circle" type="light">
                <template #prefixIcon>
                    <IconAIFilledLevel3 size="small" />
                </template>
                AI
            </Tag>
            <Tag colorful gradient shape="circle" type="ghost">
                <template #prefixIcon>
                    <IconAIFilledLevel3 size="small" />
                </template>
                AI
            </Tag>
            <Tag colorful shape="circle" type="solid">
                <template #prefixIcon>
                    <IconAIFilledLevel1 size="small" />
                </template>
                AI
            </Tag>
            <Tag colorful shape="circle" type="light">
                <template #prefixIcon>
                    <IconAIFilledLevel1 size="small" />
                </template>
                AI
            </Tag>
            <Tag colorful shape="circle" type="ghost">
                <template #prefixIcon>
                    <IconAIFilledLevel1 size="small" />
                </template>
                AI
            </Tag>
        </div>
        <div :style="grid">
            <Tag colorful gradient type="solid">
                <template #prefixIcon>
                    <IconAIFilledLevel1 size="small" />
                </template>
                AI
            </Tag>
            <Tag colorful gradient type="light">
                <template #prefixIcon>
                    <IconAIFilledLevel3 size="small" />
                </template>
                AI
            </Tag>
            <Tag colorful gradient type="ghost">
                <template #prefixIcon>
                    <IconAIFilledLevel3 size="small" />
                </template>
                AI
            </Tag>
            <Tag colorful type="solid">
                <template #prefixIcon>
                    <IconAIFilledLevel1 size="small" />
                </template>
                AI
            </Tag>
            <Tag colorful type="light">
                <template #prefixIcon>
                    <IconAIFilledLevel1 size="small" />
                </template>
                AI
            </Tag>
            <Tag colorful type="ghost">
                <template #prefixIcon>
                    <IconAIFilledLevel1 size="small" />
                </template>
                AI
            </Tag>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { IconGithubLogo, IconSemiLogo } from '@fibrous/semi-icons-vue';
    import { Space, Tag, type TagType } from '@fibrous/semi-ui-vue';

    const types: [TagType, string][] = [
        ['light', 'Light'],
        ['ghost', 'Ghost'],
        ['solid', 'Solid'],
    ];
</script>

<template>
    <Space wrap>
        <template v-for="[type, label] in types" :key="type">
            <Tag color="light-blue" shape="circle" size="large" :type="type">
                <template #prefixIcon>
                    <IconGithubLogo />
                </template>
                Semi Design {{ label }} Tag
            </Tag>
            <Tag color="cyan" shape="circle" size="large" :type="type">
                D2C: figma to code in one click
                <template #suffixIcon>
                    <IconSemiLogo />
                </template>
            </Tag>
        </template>
    </Space>
</template>

<script setup lang="ts">
    import { Space, Tag } from '@fibrous/semi-ui-vue';

    const src = '/assets/placeholder/avatar-a.svg';
</script>

<template>
    <Space align="start" vertical>
        <Tag :avatarSrc="src">焦锐志</Tag>
        <Tag :avatarSrc="src" size="large">焦锐志</Tag>
        <Tag :avatarSrc="src" closable size="large">焦锐志</Tag>
        <Tag :avatarSrc="src" avatarShape="circle">焦锐志</Tag>
        <Tag :avatarSrc="src" avatarShape="circle" size="large">焦锐志</Tag>
        <Tag :avatarSrc="src" avatarShape="circle" closable size="large">焦锐志</Tag>
    </Space>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Radio, RadioGroup, Tag, type RadioValue } from '@fibrous/semi-ui-vue';

    const value = ref<RadioValue | undefined>(0);
</script>

<template>
    <div>
        <RadioGroup v-model="value" type="button">
            <Radio :value="1">Show</Radio>
            <Radio :value="0">Hide</Radio>
        </RadioGroup>
        <div :style="{ marginTop: '10px' }">
            <Tag color="light-blue" size="large" :visible="value === 1">Invisible tag</Tag>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { TagGroup, type TagGroupItem } from '@fibrous/semi-ui-vue';

    const src = '/assets/placeholder/avatar-a.svg';
    const tagList: TagGroupItem[] = [
        { color: 'light-blue', children: '抖音' },
        { color: 'cyan', children: '火山' },
        { color: 'violet', children: '剪映' },
        { color: 'white', children: '醒图' },
    ];
    const tagList2: TagGroupItem[] = [
        { color: 'white', children: 'Douyin', avatarSrc: src },
        { color: 'white', children: 'Hotsoon', avatarSrc: src },
        { color: 'white', children: 'Capcut', avatarSrc: src },
        { color: 'white', children: 'Xingtu', avatarSrc: src },
    ];
    const divStyle = {
        backgroundColor: 'var(--semi-color-fill-0)',
        height: '35px',
        width: '300px',
        display: 'flex',
        alignItems: 'center',
        padding: '0 10px',
        marginBottom: '30px',
    };
    const tagGroupStyle = {
        display: 'flex',
        alignItems: 'center',
        width: '350px',
    };
</script>

<template>
    <div :style="divStyle">
        <TagGroup :maxTagCount="3" size="large" :style="tagGroupStyle" :tagList="tagList" />
    </div>
    <div :style="divStyle">
        <TagGroup avatarShape="circle" :maxTagCount="2" showPopover size="large" :style="tagGroupStyle" :tagList="tagList2" />
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { TagGroup, type TagCloseEvent, type TagGroupItem } from '@fibrous/semi-ui-vue';

    const tagList = ref<TagGroupItem[]>([
        { tagKey: '1', color: 'light-blue', children: '抖音', closable: true },
        { tagKey: '3', color: 'cyan', children: '剪映', closable: true },
        { tagKey: '2', color: 'violet', children: '醒图', closable: true },
        { tagKey: '4', color: 'teal', children: '轻颜相机', closable: true },
        { tagKey: '5', color: 'white', children: '飞书', closable: true },
    ]);

    const closeTag = (_event: TagCloseEvent, tagKey: string | number | undefined) => {
        tagList.value = tagList.value.filter((tag) => tag.tagKey !== tagKey);
    };
</script>

<template>
    <div
        :style="{
            backgroundColor: 'var(--semi-color-fill-0)',
            height: '35px',
            width: '300px',
            display: 'flex',
            alignItems: 'center',
            padding: '0 10px',
            marginBottom: '30px',
        }"
    >
        <TagGroup :maxTagCount="3" showPopover size="large" :style="{ display: 'flex', alignItems: 'center', width: '350px' }" :tagList="tagList" @tagClose="closeTag" />
    </div>
</template>

<script setup lang="ts">
    import { Space, SplitTagGroup, Tag } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Space align="start" vertical>
        <SplitTagGroup>
            <Tag color="blue" type="solid">标签一</Tag>
            <Tag color="cyan" type="solid">标签二</Tag>
            <Tag color="teal" type="solid">标签三</Tag>
        </SplitTagGroup>

        <SplitTagGroup>
            <Tag color="violet" shape="circle">组合</Tag>
            <Tag color="purple" shape="circle">标签</Tag>
            <Tag color="pink" shape="circle">示例</Tag>
            <Tag color="red" shape="circle">效果</Tag>
        </SplitTagGroup>

        <SplitTagGroup>
            <Tag color="amber" type="light">浅色</Tag>
            <Tag color="orange" type="light">组合</Tag>
            <Tag color="yellow" type="light">标签</Tag>
        </SplitTagGroup>

        <SplitTagGroup>
            <Tag color="green" type="ghost">镂空</Tag>
            <Tag color="light-green" type="ghost">样式</Tag>
            <Tag color="lime" type="ghost">组合</Tag>
        </SplitTagGroup>
    </Space>
</template>