面包屑

查看源代码

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

演示

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@resolid/react-ui";
import { Link } from "react-router";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  return (
    <Breadcrumb className="gap-1">
      <BreadcrumbItem className="gap-1">
        <BreadcrumbLink className="gap-0.5" render={(props) => <Link to="/" {...props} />}>
          <SpriteIcon size="1.125rem" name="home" />
          主页
        </BreadcrumbLink>
        <BreadcrumbSeparator />
      </BreadcrumbItem>
      <BreadcrumbItem className="gap-1">
        <DropdownMenu>
          <DropdownMenuTrigger>
            <SpriteIcon size="1.125rem" name="ellipsis" />
          </DropdownMenuTrigger>
          <DropdownMenuContent className="text-sm">
            <DropdownMenuItem>介绍</DropdownMenuItem>
            <DropdownMenuItem>入门指南</DropdownMenuItem>
            <DropdownMenuItem disabled>主题设置</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
        <BreadcrumbSeparator />
      </BreadcrumbItem>
      <BreadcrumbItem className="gap-1">
        <BreadcrumbLink href="#">组件</BreadcrumbLink>
        <BreadcrumbSeparator />
      </BreadcrumbItem>
      <BreadcrumbItem className="gap-1">
        <BreadcrumbLink current>面包屑</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  );
}

用法

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

举例

分隔符

使用 separator 属性自定义分隔符

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@resolid/react-ui";
import { Link } from "react-router";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  return (
    <Breadcrumb
      className="gap-1"
      separator={<span className="inline-flex h-4 w-4 items-center justify-center text-sm">/</span>}
    >
      <BreadcrumbItem className="gap-1">
        <BreadcrumbLink className="gap-0.5" render={(props) => <Link to="/" {...props} />}>
          <SpriteIcon size="1.125rem" name="home" />
          主页
        </BreadcrumbLink>
        <BreadcrumbSeparator />
      </BreadcrumbItem>
      <BreadcrumbItem className="gap-1">
        <DropdownMenu>
          <DropdownMenuTrigger>
            <SpriteIcon size="1.125rem" name="ellipsis" />
          </DropdownMenuTrigger>
          <DropdownMenuContent className="text-sm">
            <DropdownMenuItem>介绍</DropdownMenuItem>
            <DropdownMenuItem>入门指南</DropdownMenuItem>
            <DropdownMenuItem disabled>主题设置</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

建议更改此页面