nili/ui
enfaartr
Tüm bileşenler

Sidebar

Genel görünüm
23 export7 varyant ekseni37 prop4 dosya
import { Sidebar, SidebarCard, SidebarDot, SidebarFooter, SidebarGroup, SidebarHeader } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Panel

Başlık, öğe grupları ve bir alt bilgi. Kendini katlar: collapsed’ı vermeyin, panel kendi durumunu tutar ve içindeki herhangi bir SidebarTrigger onu katlar. Katlanabilmek için uygulamanın bir useState yazmasını gerektiren bir kenar çubuğu, çoğu uygulamanın katlanamaz olarak yayımladığı şeydir.

import {
  Sidebar, SidebarHeader, SidebarGroup, SidebarItem,
  SidebarFooter, SidebarUser, SidebarTrigger, Icon,
} from "@nili/ui"
import { RiHome5Line, RiFolderLine } from "@remixicon/react"

export function Example() {
  return (
    <Sidebar label="Main">
      <SidebarHeader
        logo={<PlaceholderLogo company="apex-financial" size="sm" label="" />}
        title="Apex Financial"
        subtitle="Pro plan"
        action={<SidebarTrigger />}
        collapsedAction={<SidebarTrigger />}
      />

      <SidebarGroup label="Main">
        <SidebarItem icon={<Icon icon={RiHome5Line} />} href="#">Home</SidebarItem>
        <SidebarItem icon={<Icon icon={RiFolderLine} />} href="#" active>
          Projects
        </SidebarItem>
      </SidebarGroup>

      <SidebarFooter>
        <SidebarUser
          avatar={<Avatar size="sm" name="Ada Lovelace" tone="blue" />}
          name="Ada Lovelace"
          email="ada@nili.design"
        />
      </SidebarFooter>
    </Sidebar>
  )
}

Ray

Genişletilmiş ve katlanmış tek bir bileşendir: her satır, etiketi sıfır genişliğe solmuş aynı satırdır; birine eklenen satır ikisine de eklenir. Etiketler kaldırılmak yerine DOM’da kalır — etiketsiz simgelerden oluşan bir ray, erişilebilir adlarına en çok ihtiyaç duyan düzendir.

denetimli — katlanmış
import { Sidebar } from "@nili/ui"

export function Example() {
  const [collapsed, setCollapsed] = useState(true)

  return (
    <Sidebar
      collapsed={collapsed}
      onCollapsedChange={setCollapsed}
      label="Main"
    >
      …
    </Sidebar>
  )
}