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

المرشّحات الرأسية

عناصر الترشيح الرأسية في فيجما — عمود جانبي بأعداد وحالة نشطة.

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