面包屑 Svelte 组件

面包屑组件
面包屑属性
BreadcrumbsItem 属性
BreadcrumbsCollapsed 属性
示例

面包屑允许用户跟踪并在应用或网站中保持对其位置的了解。它们应该用于具有分层排列页面的大型网站和应用。

面包屑组件

包含以下组件

面包屑
BreadcrumbsItem
BreadcrumbsSeparator
BreadcrumbsCollapsed

面包屑属性

名称	类型	默认值	描述
fontSizeIos	字符串	'text-[17px]'	iOS 主题中的字体大小
fontSizeMaterial	字符串	'text-[14px]'	Material 主题中的字体大小

BreadcrumbsItem 属性

名称	类型	默认值	描述
active	布尔值	false	将面包屑项标记为活动/当前（通常是面包屑中的最后一项）
colors	对象		包含 Tailwind CSS 颜色类别的对象
colors.bgIos	字符串	''
colors.bgMaterial	字符串	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.textActiveIos	字符串	'text-black dark:text-white'
colors.textActiveMaterial	字符串	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.textIos	字符串	'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.textMaterial	字符串	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
onClick	function(e)		`click` 事件处理程序

BreadcrumbsCollapsed 属性

名称	类型	默认值	描述
colors	对象		包含 Tailwind CSS 颜色类别的对象
colors.bgIos	字符串	'bg-black bg-opacity-15 dark:bg-white dark:bg-opacity-15'
colors.bgMaterial	字符串	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.dotBgIos	字符串	'bg-black dark:bg-white'
colors.dotBgMaterial	字符串	'bg-md-light-primary dark:bg-md-dark-primary'
onClick	function(e)		`click` 事件处理程序

示例

Breadcrumbs.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    BlockTitle,
    BlockHeader,
    Block,
    Breadcrumbs,
    BreadcrumbsItem,
    BreadcrumbsSeparator,
    BreadcrumbsCollapsed,
    Popover,
    List,
    ListItem,
    Link,
  } from 'konsta/svelte';

  let popoverOpened = false;

</script>

<Page>
  <Navbar title="Breadcrumbs" />

  <Block strong inset>
    <p>
      Breadcrumbs allow users to keep track and maintain awareness of their
      locations within the app or website. They should be used for large sites
      and apps with hierarchically arranged pages.
    </p>
  </Block>

  <BlockTitle>Basic</BlockTitle>
  <Block strongIos outlineIos>
    <Breadcrumbs>
      <BreadcrumbsItem>
        <Link>Home</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem>
        <Link>Catalog</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem active>Phones</BreadcrumbsItem>
    </Breadcrumbs>
  </Block>

  <BlockTitle>Scrollable</BlockTitle>
  <BlockHeader
    >Breadcrumbs will be scrollable if they don't fit the screen</BlockHeader
  >
  <Block strongIos outlineIos>
    <Breadcrumbs>
      <BreadcrumbsItem>
        <Link>Home</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem>
        <Link>Catalog</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem>
        <Link>Phones</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem>
        <Link>Apple</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
    </Breadcrumbs>
  </Block>

  <BlockTitle>Collapsed</BlockTitle>
  <Block strongIos outlineIos>
    <Breadcrumbs>
      <BreadcrumbsItem>
        <Link>Home</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsCollapsed
        class="breadcrumbs-popover-link"
        onClick={() => (popoverOpened = true)}
      />
      <BreadcrumbsSeparator />
      <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
    </Breadcrumbs>
    <Popover
      target=".breadcrumbs-popover-link"
      style="width: 120px"
      onBackdropClick={() => (popoverOpened = false)}
      opened={popoverOpened}
    >
      <List nested>
        <ListItem
          link
          title="Catalog"
          onClick={() => (popoverOpened = false)}
        />
        <ListItem link title="Phones" onClick={() => (popoverOpened = false)} />
        <ListItem link title="Apple" onClick={() => (popoverOpened = false)} />
      </List>
    </Popover>
  </Block>
</Page>