nili/ui
enfaartr
همه‌ی کامپوننت‌ها

Sidebar

نمای کلی
۲۳ اکسپورت۷ محور واریانت۳۷ پراپ۴ فایل
import { Sidebar, SidebarCard, SidebarDot, SidebarFooter, SidebarGroup, SidebarHeader } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

پنل

سربرگ، گروه‌هایی از آیتم‌ها، و یک پابرگ. خودش جمع می‌شود: collapsed را ندهید و پنل وضعیت خودش را نگه می‌دارد، و هر SidebarTrigger داخلش تایش می‌کند. سایدباری که برای جمع‌شدن نیاز دارد اپ یک useState بنویسد، همانی است که بیشتر اپ‌ها بدون قابلیت جمع‌شدن منتشرش می‌کنند.

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

ریل

باز و جمع‌شده یک کامپوننت‌اند: هر ردیف همان ردیف است با برچسبی که تا عرض صفر محو شده، پس ردیفی که به یکی اضافه شود به هر دو اضافه می‌شود. برچسب‌ها به‌جای آنکه از DOM حذف شوند در آن می‌مانند — ریلی از آیکون‌های بی‌برچسب همان چیدمانی است که بیش از همه به نام‌های دسترس‌پذیرش نیاز دارد.

کنترل‌شده — جمع‌شده
import { Sidebar } from "@nili/ui"

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

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