nili/ui
enfaartr
Tüm bileşenler

QuickActions

Genel görünüm
18 export9 varyant ekseni32 prop4 dosya
import { QuickActionItemLayout, QuickActions, QuickActionsLayout } 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.

Izgara düzeni

Varsayılan düzen. Yoğunluğu denetlemek için columns kullanın; öğeler dar ekranlarda okunur kalır.

import { QuickActions, QuickActionItem, Icon } from "@nili/ui"
import { RiFileAddLine, RiUserAddLine, RiUploadCloud2Line } from "@remixicon/react"

export function Example() {
  return (
    <QuickActions label="Quick actions" columns={2}>
      <QuickActionItem
        icon={<Icon icon={RiFileAddLine} />}
        tone="primary"
        description="Create a draft invoice"
      >
        New invoice
      </QuickActionItem>
      <QuickActionItem
        icon={<Icon icon={RiUserAddLine} />}
        tone="feature"
        description="Send an invite link"
      >
        Invite member
      </QuickActionItem>
      <QuickActionItem
        icon={<Icon icon={RiUploadCloud2Line} />}
        tone="success"
        description="Attach a PDF or image"
      >
        Upload file
      </QuickActionItem>
    </QuickActions>
  )
}

Başlık ve eylemle

Grubun üstünde isteğe bağlı bir başlık, artı sonda bir denetim (örneğin Tümünü gör).

Başlayın
import { QuickActions, QuickActionItem, Icon, Button } from "@nili/ui"

export function Example() {
  return (
    <QuickActions
      title="Get started"
      action={<Button appearance="ghost" size="sm">See all</Button>}
      columns={2}
    >
      <QuickActionItem icon={<Icon icon={RiFileAddLine} />} tone="primary">
        New invoice
      </QuickActionItem>
      <QuickActionItem icon={<Icon icon={RiUserAddLine} />} tone="feature">
        Invite member
      </QuickActionItem>
    </QuickActions>
  )
}

Görünümler

card (varsayılan), tile, ghost ve list. Çevredeki yüzeye uyan ağırlığı seçin.

card
tile
ghost
list
import { QuickActions, QuickActionItem, Icon } from "@nili/ui"

export function Example() {
  return (
    <QuickActions columns={2}>
      <QuickActionItem appearance="card" icon={<Icon icon={RiFileAddLine} />}>
        Card
      </QuickActionItem>
      <QuickActionItem appearance="tile" icon={<Icon icon={RiUserAddLine} />}>
        Tile
      </QuickActionItem>
      <QuickActionItem appearance="ghost" icon={<Icon icon={RiSettings3Line} />}>
        Ghost
      </QuickActionItem>
      <QuickActionItem appearance="list" icon={<Icon icon={RiShareForwardLine} />}>
        List
      </QuickActionItem>
    </QuickActions>
  )
}

Simge tonları

Simge çipinin rengi. Varsayılan neutral; anlam için anlamsal tonları kullanın.

import { QuickActions, QuickActionItem, Icon } from "@nili/ui"

export function Example() {
  return (
    <QuickActions columns={3}>
      <QuickActionItem icon={<Icon icon={RiFileAddLine} />} tone="primary">
        Primary
      </QuickActionItem>
      <QuickActionItem icon={<Icon icon={RiUserAddLine} />} tone="success">
        Success
      </QuickActionItem>
      <QuickActionItem icon={<Icon icon={RiSettings3Line} />} tone="error">
        Error
      </QuickActionItem>
    </QuickActions>
  )
}

Dikey karolar

Etiketin üstünde simge — telefon ana ekranlarında ve boş durumlarda kullanılan kare karo deseni.

import { QuickActions, QuickActionItem, Icon } from "@nili/ui"

export function Example() {
  return (
    <QuickActions columns={4}>
      <QuickActionItem
        layout="vertical"
        appearance="tile"
        icon={<Icon icon={RiFileAddLine} />}
        tone="primary"
      >
        Invoice
      </QuickActionItem>
      <QuickActionItem
        layout="vertical"
        appearance="tile"
        icon={<Icon icon={RiUserAddLine} />}
        tone="feature"
      >
        Invite
      </QuickActionItem>
    </QuickActions>
  )
}

Satır düzeni

Satır kırmak yerine yatay kaydırma — kısayol satırını dar ekranlarda tek satırda tutar.

import { QuickActions, QuickActionItem, Icon } from "@nili/ui"

export function Example() {
  return (
    <QuickActions layout="row" label="Shortcuts">
      <QuickActionItem icon={<Icon icon={RiFileAddLine} />} tone="primary">
        New invoice
      </QuickActionItem>
      <QuickActionItem icon={<Icon icon={RiUserAddLine} />} tone="feature">
        Invite
      </QuickActionItem>
      <QuickActionItem icon={<Icon icon={RiUploadCloud2Line} />} tone="success">
        Upload
      </QuickActionItem>
    </QuickActions>
  )
}

Kısayollu liste

Klavye ipuçlu düz liste öğeleri — komut paletleri ya da menüler içinde işe yarar.

import { QuickActions, QuickActionItem, Icon } from "@nili/ui"

export function Example() {
  return (
    <QuickActions columns={1}>
      <QuickActionItem
        appearance="list"
        icon={<Icon icon={RiFileAddLine} />}
        shortcut="⌘N"
      >
        New invoice
      </QuickActionItem>
      <QuickActionItem
        appearance="list"
        icon={<Icon icon={RiUserAddLine} />}
        shortcut="⌘I"
        active
      >
        Invite member
      </QuickActionItem>
    </QuickActions>
  )
}

Alt bilgi

Komut paleti alt bilgisi: bir yanda klavye ipuçları, öbür yanda Yardım Merkezi bağlantısı. Onu bir QuickActionItem listesinin altında kurun — ayrı bir dışa aktarım değildir.

to navigateto select
Not what you're looking for? Yardım Merkezi
import { QuickActions, QuickActionItem, Icon, LinkButton } from "@nili/ui"
import {
  RiFileAddLine,
  RiUserAddLine,
  RiArrowUpLine,
  RiArrowDownLine,
  RiCornerDownLeftLine,
} from "@remixicon/react"

export function Example() {
  return (
    <div className="overflow-hidden rounded-xl border border-soft-200 bg-white-0">
      <QuickActions columns={1} className="p-1">
        <QuickActionItem
          appearance="list"
          icon={<Icon icon={RiFileAddLine} />}
          shortcut="⌘N"
        >
          New invoice
        </QuickActionItem>
        <QuickActionItem
          appearance="list"
          icon={<Icon icon={RiUserAddLine} />}
          shortcut="⌘I"
        >
          Invite member
        </QuickActionItem>
      </QuickActions>

      <div className="flex flex-wrap items-center justify-between gap-3 border-t border-soft-200 px-4 py-3 text-[12px] leading-4 text-sub-600">
        <div className="flex flex-wrap items-center gap-4">
          <span className="flex items-center gap-1">
            <kbd className="flex size-5 items-center justify-center rounded-md border border-soft-200 bg-weak-50">
              <Icon icon={RiArrowUpLine} />
            </kbd>
            <kbd className="flex size-5 items-center justify-center rounded-md border border-soft-200 bg-weak-50">
              <Icon icon={RiArrowDownLine} />
            </kbd>
            to navigate
          </span>
          <span className="flex items-center gap-1">
            <kbd className="flex size-5 items-center justify-center rounded-md border border-soft-200 bg-weak-50">
              <Icon icon={RiCornerDownLeftLine} />
            </kbd>
            to select
          </span>
        </div>
        <span>
          Not what you&apos;re looking for?{" "}
          <LinkButton color="primary" size="sm" underline href="#">
            Help Center
          </LinkButton>
        </span>
      </div>
    </div>
  )
}