nili/ui
enfaartr
Tüm bileşenler

Filter

Genel görünüm
14 export6 varyant ekseni33 prop3 dosya
import { FilterBar, FilterChip, FilterList } 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.

Yatay filtreler

Bir filtre çipi satırı. Etkin çipler seçilen değeri ve isteğe bağlı bir temizleme düğmesini gösterir. Kesik çizgili “Filtre ekle” ipucu için placeholder kullanın.

import { FilterBar, FilterChip, Icon } from "@nili/ui"
import { RiPriceTag3Line, RiCalendarLine, RiUserLine } from "@remixicon/react"

export function Example() {
  return (
    <FilterBar surface="panel" label="Table filters">
      <FilterChip
        active
        value="Active"
        startIcon={<Icon icon={RiPriceTag3Line} />}
        onClear={() => {}}
        clearLabel="Clear"
      >
        Status
      </FilterChip>
      <FilterChip startIcon={<Icon icon={RiCalendarLine} />}>Date</FilterChip>
      <FilterChip startIcon={<Icon icon={RiUserLine} />}>Owner</FilterChip>
      <FilterChip placeholder>Add filter</FilterChip>
    </FilterBar>
  )
}

Dikey filtreler

Figma’nın Vertical Filter Items’ı — sayılar ve etkin durum taşıyan bir kenar sütunu.

import { FilterList, FilterListItem } from "@nili/ui"

export function Example() {
  return (
    <div className="w-56 rounded-xl border border-soft-200 p-2">
      <FilterList label="Status">
        <FilterListItem active count={128}>All</FilterListItem>
        <FilterListItem count={42}>Active</FilterListItem>
        <FilterListItem count={12}>Draft</FilterListItem>
        <FilterListItem count={74}>Archived</FilterListItem>
      </FilterList>
    </div>
  )
}

Yatay filtre

Figma’dan araç çubuğu desenleri: Calendar türü (tarih aralığı + arama) ve Table türü (bölümlü durum + sıralama).

Type · Calendar
Type · Table
import {
  Button,
  ButtonGroup,
  ButtonGroupItem,
  TextInput,
  Icon,
} from "@nili/ui"
import {
  RiCalendarLine,
  RiArrowDownSLine,
  RiSortDesc,
  RiSearch2Line,
} from "@remixicon/react"

export function Example() {
  return (
    <>
      {/* Type · Calendar */}
      <div className="flex flex-wrap items-center gap-3">
        <Button size="sm" appearance="stroke" color="neutral">
          Today
        </Button>
        <ButtonGroup size="sm" label="Date">
          <ButtonGroupItem endIcon={<Icon icon={RiArrowDownSLine} />}>
            Last 7 days
          </ButtonGroupItem>
          <ButtonGroupItem startIcon={<Icon icon={RiCalendarLine} />}>
            Aug 04 - Aug 11 2023
          </ButtonGroupItem>
        </ButtonGroup>
        <TextInput
          size="sm"
          aria-label="Search"
          placeholder="Search..."
          startIcon={<Icon icon={RiSearch2Line} />}
          shortcut="⌘1"
          className="w-[220px]"
        />
      </div>

      {/* Type · Table */}
      <div className="flex flex-wrap items-center gap-3">
        <ButtonGroup size="sm" label="Type">
          <ButtonGroupItem selected>All</ButtonGroupItem>
          <ButtonGroupItem>Income</ButtonGroupItem>
          <ButtonGroupItem>Expenses</ButtonGroupItem>
        </ButtonGroup>
        <Button
          size="sm"
          appearance="stroke"
          color="neutral"
          startIcon={<Icon icon={RiSortDesc} />}
          endIcon={<Icon icon={RiArrowDownSLine} />}
        >
          Sort by
        </Button>
      </div>
    </>
  )
}

Dikey filtre öğeleri

Tek bir kenar öğesi için varsayılan, üzerine gelme (CSS) ve etkin durumlar.

VarsayılanÜzerine gelmeEtkin
import { FilterListItem, Icon } from "@nili/ui"
import { RiCalendarLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <FilterListItem startIcon={<Icon icon={RiCalendarLine} />}>
        Date
      </FilterListItem>
      <FilterListItem startIcon={<Icon icon={RiCalendarLine} />} active>
        Date
      </FilterListItem>
    </>
  )
}