Tag

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

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

<div>
    <Space>
        <Tag>default tag</Tag>
        <Tag closable>Closable Tag</Tag>
        <Tag closable onClose={preventClose}>Closable Tag, Prevent Default</Tag>
    </Space>
</div>

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

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

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

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

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

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

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

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

<Space wrap>
    {#each colors as color (color)}
        <Tag {color}>{color}</Tag>
    {/each}
</Space>

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

    const grid = 'display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; width: fit-content';
</script>

{#snippet level1()}
    <IconAIFilledLevel1 size="small" />
{/snippet}
{#snippet level3()}
    <IconAIFilledLevel3 size="small" />
{/snippet}

<div style="display: flex; flex-direction: column; row-gap: 30px">
    <div style={grid}>
        <Tag colorful gradient prefixIcon={level1} shape="circle" type="solid">AI</Tag>
        <Tag colorful gradient prefixIcon={level3} shape="circle" type="light">AI</Tag>
        <Tag colorful gradient prefixIcon={level3} shape="circle" type="ghost">AI</Tag>
        <Tag colorful prefixIcon={level1} shape="circle" type="solid">AI</Tag>
        <Tag colorful prefixIcon={level1} shape="circle" type="light">AI</Tag>
        <Tag colorful prefixIcon={level1} shape="circle" type="ghost">AI</Tag>
    </div>
    <div style={grid}>
        <Tag colorful gradient prefixIcon={level1} type="solid">AI</Tag>
        <Tag colorful gradient prefixIcon={level3} type="light">AI</Tag>
        <Tag colorful gradient prefixIcon={level3} type="ghost">AI</Tag>
        <Tag colorful prefixIcon={level1} type="solid">AI</Tag>
        <Tag colorful prefixIcon={level1} type="light">AI</Tag>
        <Tag colorful prefixIcon={level1} type="ghost">AI</Tag>
    </div>
</div>

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

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

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

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

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

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

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

    let value = $state<RadioValue | undefined>(0);
</script>

<div>
    <RadioGroup aria-label="标签可见性" bind:value name="demo-tag-visible" type="button">
        <Radio value={1}>Show</Radio>
        <Radio value={0}>Hide</Radio>
    </RadioGroup>
    <div style="margin-top: 10px">
        <Tag color="light-blue" size="large" visible={value === 1}>Invisible tag</Tag>
    </div>
</div>

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

    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 = 'background-color: var(--semi-color-fill-0); height: 35px; width: 300px; display: flex; align-items: center; padding: 0 10px; margin-bottom: 30px';
    const tagGroupStyle = 'display: flex; align-items: center; width: 350px';
</script>

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

<script lang="ts">
    import { TagGroup, type TagCloseEvent, type TagGroupItem } from '@fibrae/semi-ui-svelte';

    let tagList = $state<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 = tagList.filter((tag) => tag.tagKey !== tagKey);
    };
</script>

<div style="background-color: var(--semi-color-fill-0); height: 35px; width: 300px; display: flex; align-items: center; padding: 0 10px; margin-bottom: 30px">
    <TagGroup maxTagCount={3} onTagClose={closeTag} showPopover size="large" style="display: flex; align-items: center; width: 350px" {tagList} />
</div>

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

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