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