nili/ui
enfaartr
Tüm bileşenler

Topbar

Genel görünüm
10 export1 varyant ekseni21 prop4 dosya
import { Topbar, TopbarUser } 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.

Çubuk

Bir logo yuvası, bir öğe satırı ve sonda bir eylem yuvası. label işareti adlandırır — Topbar’ı ve Sidebar’ı olan bir sayfada iki nav vardır ve “gezinme, gezinme” bir işaret listesi değildir.

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

Öğe durumları

active geçerli sayfayı imler. menu, gezinmek yerine bir açılır menü açan öğeye şevron ekler. href onu bağlantı yapar; olmadığında düğme olarak çizilir.

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

Eylem yuvası

Çubuğun sonuna ait olan her şey — arama, bildirimler, birincil bir eylem, hesap menüsü. Bu sistemdeki diğer her sondaki yuvanın nedeniyle, bir enum değil serbest bir yuvadır.

arama · bildirimler · eylem · hesap
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>
  )
}