ნავიგაციის გზა · Breadcrumb
სერვერულად უსაფრთხო ნავიგაციის ჯაჭვი მიმდინარე გვერდის აღნიშვნით.
მაგალითი
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from "@llc-conciergia/ui/breadcrumb";
export function Example() { return <Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">სასტუმრო</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>ნომრები</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>; }ინსტალაცია
pnpm add @llc-conciergia/uiimport { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from "@llc-conciergia/ui/breadcrumb";npx @llc-conciergia/cli add breadcrumbnpx shadcn@latest add https://ui.conciergia.co/r/breadcrumb.jsonშენიშვნები
LocaleProvider ამ სერვერულ კომპონენტზე არ მოქმედებს. label და BreadcrumbEllipsis.label გადათარგმნეთ სერვერზე. Separator მოათავსეთ List-ის პირდაპირ შვილად. Ellipsis მხოლოდ ტექსტური მაჩვენებელია; მენიუ დაამატეთ ცალკე.Props
| Prop | ტიპი | ნაგულისხმევი | აღწერა |
|---|---|---|---|
| Breadcrumb: label | string | — | ნავიგაციის accessible name; ნაგულისხმევად ნავიგაცია. |
| BreadcrumbList / BreadcrumbItem | ol / li props | — | სემანტიკური სია და ელემენტები. |
| BreadcrumbLink: render / href | ReactElement / string | — | მაგალითად render={<Link href="/rooms" />}; props/ref უნდა გადაიცეს ბმულზე. |
| BreadcrumbPage | span props | — | aria-current="page"; არ არის ინტერაქტიული. |
| BreadcrumbSeparator: children | ReactNode | — | ნაგულისხმევად ChevronRight; დამალულია screen reader-ისგან. |
| BreadcrumbEllipsis: label | string | — | ნაგულისხმევად მეტი გვერდი; თარგმანი მიეცით პირდაპირ. |
| ყველა ნაწილი: className / ref | native HTML props | — | სტილის და ref-ის გადაცემა. |