Breadcrumb

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

<Breadcrumb routes={['Semi-ui', 'Breadcrumb', 'Default']} />

<script lang="ts">
    import { IconArticle, IconHome } from '@fibrae/semi-icons-svelte';
    import { Breadcrumb } from '@fibrae/semi-ui-svelte';
</script>

<Breadcrumb routes={['', 'Breadcrumb', 'With Icon']}>
    {#snippet icon({ class: className, index, size })}
        {#if index === 0}
            <IconHome aria-label="Home" class={className} {size} />
        {:else if index === 1}
            <IconArticle class={className} {size} />
        {/if}
    {/snippet}
</Breadcrumb>

<script lang="ts">
    import { IconHome } from '@fibrae/semi-icons-svelte';
    import { Breadcrumb, type BreadcrumbIconContext } from '@fibrae/semi-ui-svelte';

    const routes = ['', 'Breadcrumb', 'Loose'];
</script>

{#snippet icon({ class: className, index, size }: BreadcrumbIconContext)}
    {#if index === 0}
        <IconHome aria-label="Home" class={className} {size} />
    {/if}
{/snippet}

<!-- Several breadcrumbs on one page are told apart by aria-label -->
<div>
    <Breadcrumb aria-label="紧凑面包屑" compact {icon} {routes} />
    <br />
    <Breadcrumb aria-label="宽松面包屑" compact={false} {icon} {routes} />
</div>

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

<!-- Several breadcrumbs on one page are told apart by aria-label -->
<div>
    <Breadcrumb aria-label="文字分隔符" routes={['Semi-ui', 'Breadcrumb', 'Default']} separator=">" />
    <br />
    <Breadcrumb aria-label="图标分隔符" routes={['Semi-ui', 'Breadcrumb', 'Default']}>
        {#snippet separator()}
            <IconArrowRight size="small" />
        {/snippet}
    </Breadcrumb>
    <br />
    <Tag>v&gt;=1.16.0</Tag>
    <br />
    <Breadcrumb aria-label="单项分隔符" routes={[{ name: 'Semi-ui', separator: ':' }, 'Breadcrumb', 'Default']} />
</div>

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

    const routes = ['首页', '当这个页面标题很长很长很长时需要省略', '详情页'];
</script>

<!-- Several breadcrumbs on one page are told apart by aria-label -->
<div>
    <TypographyText size="small">默认行为</TypographyText>
    <Breadcrumb aria-label="默认行为" {routes} />
    <br />
    <TypographyText size="small">省略但不显示Tooltip</TypographyText>
    <Breadcrumb aria-label="省略但不显示Tooltip" {routes} showTooltip={false} />
    <br />
    <TypographyText size="small">不截断</TypographyText>
    <Breadcrumb aria-label="不截断" {routes} showTooltip={{ width: 'auto' }} />
    <br />
    <TypographyText size="small">从标题中间开始省略</TypographyText>
    <Breadcrumb aria-label="从标题中间开始省略" {routes} showTooltip={{ ellipsisPos: 'middle' }} />
    <br />
    <TypographyText size="small">自定义 Tooltip 参数</TypographyText>
    <Breadcrumb aria-label="自定义 Tooltip 参数" {routes} showTooltip={{ opts: { position: 'topLeft' } }} />
</div>

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

<Breadcrumb routes={['首页', '当层级很多的时候', '又一层', '再一层', '上上一层', '上一层', '详情页']} />

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

<Breadcrumb moreType="popover" routes={['首页', '当层级很多的时候', '又一层', '再一层', '上上一层', '上一层', '详情页']} />

<script lang="ts">
    import { IconMore } from '@fibrae/semi-icons-svelte';
    import { Breadcrumb, Popover, type BreadcrumbRoute } from '@fibrae/semi-ui-svelte';

    // Joins the collapsed items in the popup
    const separator = '-';
    const onClick = (route: BreadcrumbRoute, event: MouseEvent) => console.log(route, event);
</script>

<Breadcrumb {onClick} routes={['首页', '当层级很多的时候', '又一层', '再一层', '上上一层', '上一层', '详情页']}>
    {#snippet more({ restItems })}
        <Popover showArrow style="padding: 12px">
            {#snippet child({ props })}<IconMore {...props} tabindex={-1} />{/snippet}
            {#snippet content()}
                {#each restItems as { route, index }, i (index)}
                    <span>{route.name}</span>
                    {#if i < restItems.length - 1}
                        <span style="color: var(--semi-color-text-2); margin-inline-end: 6px">{separator}</span>
                    {/if}
                {/each}
            {/snippet}
        </Popover>
    {/snippet}
</Breadcrumb>

<script lang="ts">
    import { IconArticle, IconHome } from '@fibrae/semi-icons-svelte';
    import { Breadcrumb, type BreadcrumbRoute } from '@fibrae/semi-ui-svelte';

    const iconRoutes: (BreadcrumbRoute | string)[] = [{ path: '/', href: '/' }, { path: '/breadcrumb', href: '/zh-CN/navigation/breadcrumb', name: 'breadcrumb' }, 'with icon'];
</script>

<!-- Several breadcrumbs on one page are told apart by aria-label -->
<div>
    <Breadcrumb aria-label="字符串路由" routes={['Semi-ui', 'Breadcrumb', 'Default']} />
    <br />
    <Breadcrumb aria-label="带图标的路由" routes={iconRoutes}>
        {#snippet icon({ class: className, index, size })}
            {#if index === 0}
                <IconHome aria-label="首页" class={className} {size} />
            {:else if index === 1}
                <IconArticle class={className} {size} />
            {/if}
        {/snippet}
    </Breadcrumb>
    <br />
    <Breadcrumb aria-label="长标题路由" routes={['首页', '当这个页面标题很长时需要省略', '详情页']} />
</div>