@chakra-ui/面包屑

Breadcrumbs 帮助用户可视化当前位置相对于其他位置 通过显示页面的分级来显示网站或应用程序.

安装

yarn add @chakra-ui/breadcrumb

# or

npm i @chakra-ui/breadcrumb

导入组件

Chakra UI出口出3个面包屑相关组件:

• Breadcrumb:面包屑的母容器.
• BreadcrumbItem: 单个面包屑元素,含有链接和 交换器.
• BreadcrumbLink:面包屑链接.

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "@chakra-ui/react"

使用量

添加 isCurrentPage 给 BreadcrumbItem 匹配当前路径. 当这个道具出现时 BreadcrumbItem 没有分离器,和 页:1 BreadcrumbLink 已经 aria-current 设置为 page。 。 。 .

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href="#">Docs</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink>Help</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

分离器

通过传递字符串来改变面包屑中所用的分隔符,比如 - 或任何 反应元素( 如图标)

<Breadcrumb separator="-">
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href="/about">About</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/contact">Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

使用图标作为分隔符

<Breadcrumb
  spacing="8px"
  separator={<Icon color="gray.300" name="chevron-right" />}
>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href="/about">About</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/contact">Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>