面包屑

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

导入

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from "@resolid/react-ui";

Breadcrumb: 面包屑的父容器。
BreadcrumbItem: 包含链接和分隔符的单个面包屑元素。
BreadcrumbLink: 面包屑链接。
BreadcrumbSeparator: 每个面包屑之间的可视分隔符。

演示

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>
  );
}

举例

分隔符

使用 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>
  );
}

属性

Breadcrumb

属性	类型	默认值	必须
属性separator	简介每个面包屑项目之间的视觉分隔符	类型ReactNode	默认值<SlashIcon>	必须false

BreadcrumbLink

属性	类型	默认值	必须
属性current	简介面包屑链接是否代表当前页面。	类型boolean	默认值-	必须false

建议更改此页面