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

Topbar

نمای کلی
۱۰ اکسپورت۱ محور واریانت۲۱ پراپ۴ فایل
import { Topbar, TopbarUser } from '@nili/ui';

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

نوار

یک اسلات لوگو، یک ردیف آیتم، و یک اسلات کنش در انتها. label لندمارک را نام‌گذاری می‌کند — صفحه‌ای که هم Topbar دارد هم Sidebar دو nav دارد، و «ناوبری، ناوبری» فهرست لندمارک نیست.

import { Topbar, TopbarItem, TopbarUser, Icon } from "@nili/ui"
import { RiHome5Line, RiFolderLine } from "@remixicon/react"

export function Example() {
  return (
    <Topbar
      label="Main"
      logo={<PlaceholderLogo company="apex-financial" size="sm" label="Apex Financial" />}
      actions={
        <TopbarUser
          avatar={<Avatar size="xs" name="Ada Lovelace" tone="blue" />}
          name="Ada Lovelace"
        />
      }
    >
      <TopbarItem icon={<Icon icon={RiHome5Line} />} href="#">Home</TopbarItem>
      <TopbarItem icon={<Icon icon={RiFolderLine} />} href="#" active>
        Projects
      </TopbarItem>
    </Topbar>
  )
}

حالت‌های آیتم

active صفحهٔ فعلی را علامت می‌زند. menu برای آیتمی که به‌جای ناوبری یک دراپ‌داون باز می‌کند شورون اضافه می‌کند. href آن را لینک می‌کند؛ بدون آن به‌صورت دکمه رندر می‌شود.

import { Topbar, TopbarItem } from "@nili/ui"

export function Example() {
  return (
    <Topbar label="Main">
      <TopbarItem href="#" active>Projects</TopbarItem>
      <TopbarItem href="#">Reports</TopbarItem>
      <TopbarItem menu>Workspace</TopbarItem>
      <TopbarItem disabled>Billing</TopbarItem>
    </Topbar>
  )
}

اسلات کنش‌ها

هرچه که به انتهای نوار تعلق دارد — جست‌وجو، اعلان‌ها، یک کنش اصلی، منوی حساب. به همان دلیلی که هر اسلات انتهایی دیگر در این سیستم آزاد است، این هم enum نیست.

جست‌وجو · اعلان‌ها · کنش · حساب
3
import { Topbar, TopbarItem, TopbarUser, CompactButton, Button, Icon } from "@nili/ui"
import { RiSearchLine, RiNotification3Line } from "@remixicon/react"

export function Example() {
  return (
    <Topbar
      label="Main"
      actions={
        <>
          <CompactButton appearance="ghost" aria-label="Search">
            <Icon icon={RiSearchLine} />
          </CompactButton>
          <CompactButton appearance="ghost" aria-label="Notifications">
            <Icon icon={RiNotification3Line} />
          </CompactButton>
          <Button size="xs">New project</Button>
          <TopbarUser
            avatar={<Avatar size="xs" name="Ada Lovelace" tone="blue" />}
            name="Ada Lovelace"
          />
        </>
      }
    >
      …
    </Topbar>
  )
}