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

Filter

نمای کلی
۱۴ اکسپورت۶ محور واریانت۳۳ پراپ۳ فایل
import { FilterBar, FilterChip, FilterList } from '@nili/ui';

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

فیلترهای افقی

ردیفی از چیپ‌های فیلتر. چیپ فعال مقدار انتخاب‌شده و یک دکمهٔ پاک‌کردن اختیاری را نشان می‌دهد. برای آن نشانهٔ خط‌چین «افزودن فیلتر» از placeholder استفاده کنید.

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

فیلترهای عمودی

همان Vertical Filter Items فیگما — یک ستون کناری با شمارنده و حالت فعال.

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

فیلتر افقی

الگوهای نوار ابزار از فیگما: نوع Calendar (بازهٔ تاریخ + جست‌وجو) و نوع Table (وضعیت بخش‌بندی‌شده + مرتب‌سازی).

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

آیتم‌های فیلتر عمودی

حالت‌های پیش‌فرض، هاور (با CSS) و فعال برای یک آیتم کناری.

پیش‌فرضهاورفعال
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>
    </>
  )
}