面包屑

一种辅助导航模式，用于标识页面在层次结构中的位置，并允许根据需要进行向上导航。

导入

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from "@resolid/react-ui";
  • Breadcrumb: 面包屑的父容器。
  • BreadcrumbItem: 包含链接和分隔符的单个面包屑元素。
  • BreadcrumbLink: 面包屑链接。
  • BreadcrumbSeparator: 每个面包屑之间的可视分隔符。

用法

<Breadcrumb className={"gap-1"}>
  <BreadcrumbItem className={"gap-1"}>
    <BreadcrumbLink asChild>
      <Link to={'/'}>主页</Link>
    </BreadcrumbLink>
    <BreadcrumbSeparator />
  </BreadcrumbItem>
  <BreadcrumbItem className={"gap-1"}>
    <DropdownMenu>
      <DropdownMenuTrigger><SpriteIcon name={"ellipsis"} /></DropdownMenuTrigger>
      <DropdownMenuContent className={"text-sm"}>
        <DropdownMenuItem>介绍</DropdownMenuItem>
        <DropdownMenuItem>主题</DropdownMenuItem>
        <DropdownMenuItem disabled>Github</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
    <BreadcrumbSeparator />
  </BreadcrumbItem>
  <BreadcrumbItem className={"gap-1"}>
    <BreadcrumbLink href={'#'}>
      组件
    </BreadcrumbLink>
    <BreadcrumbSeparator />
  </BreadcrumbItem>
  <BreadcrumbItem className={"gap-1"}>
    <BreadcrumbLink current>
      面包屑
    </BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

分隔符

<Breadcrumb separator={<span className={"text-sm items-center inline-flex justify-center h-5 w-5"}>/</span>} className={"gap-1"}>
  <BreadcrumbItem className={"gap-1"}>
    <BreadcrumbLink asChild>
      <Link to={'/'}>主页</Link>
    </BreadcrumbLink>
    <BreadcrumbSeparator />
  </BreadcrumbItem>
  <BreadcrumbItem className={"gap-1"}>
    <DropdownMenu>
      <DropdownMenuTrigger>
        <SpriteIcon name={"ellipsis"} />
      </DropdownMenuTrigger>
      <DropdownMenuContent className={"text-sm"}>
        <DropdownMenuItem>介绍</DropdownMenuItem>
        <DropdownMenuItem>主题</DropdownMenuItem>
        <DropdownMenuItem disabled>Github</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
    <BreadcrumbSeparator />
  </BreadcrumbItem>
  <BreadcrumbItem className={"gap-1"}>
    <BreadcrumbLink href={'#'}>
      组件
    </BreadcrumbLink>
    <BreadcrumbSeparator />
  </BreadcrumbItem>
  <BreadcrumbItem className={"gap-1"}>
    <BreadcrumbLink current>
      面包屑
    </BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

属性

面包屑

属性separator类型ReactNode默认值<SlashIcon>必须false

面包屑链接

属性current类型boolean默认值-必须false
属性asChild类型boolean默认值false必须false