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

Toggle

نمای کلی
۷ اکسپورت۲ محور واریانت۲۳ پراپ۴ فایل
import { Toggle, ToggleGroup } from '@nili/ui';

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

پایه

یک انتخاب از میان چندتا، همیشه دیده‌شدنی — شکلی که Radio Group وقتی گزینه‌ها کوتاه و ناسازگارند به خود می‌گیرد. برای کنترل value و onValueChange، و برای رهاکردنش defaultValue.

import { Toggle, ToggleGroup } from "@nili/ui"

export function Example() {
  const [view, setView] = useState("grid")

  return (
    <ToggleGroup value={view} onValueChange={setView} ariaLabel={t('view.label')}>
      <Toggle value="grid">{t('view.grid')}</Toggle>
      <Toggle value="list">{t('view.list')}</Toggle>
      <Toggle value="table">{t('view.table')}</Toggle>
    </ToggleGroup>
  )
}

همراه با آیکون

startIcon یک نشان پیش از برچسب می‌گذارد. iconOnly برچسب را برمی‌دارد و دکمه را مربعی می‌کند — به آن aria-label بدهید، چون آن‌وقت تنها چیزی که نامش می‌دهد همان آیکون است.

برچسب و آیکون
فقط آیکون
import { Toggle, ToggleGroup, Icon } from "@nili/ui"
import { RiLayoutGridLine, RiListCheck, RiTableLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <ToggleGroup defaultValue="grid" ariaLabel={t('view.label')}>
        <Toggle value="grid" startIcon={<Icon icon={RiLayoutGridLine} />}>
          Grid
        </Toggle>
        <Toggle value="list" startIcon={<Icon icon={RiListCheck} />}>
          List
        </Toggle>
      </ToggleGroup>

      {/* icon only */}
      <ToggleGroup defaultValue="grid" ariaLabel={t('view.label')}>
        <Toggle value="grid" iconOnly aria-label={t('view.grid')}>
          <Icon icon={RiLayoutGridLine} />
        </Toggle>
        <Toggle value="list" iconOnly aria-label={t('view.list')}>
          <Icon icon={RiListCheck} />
        </Toggle>
      </ToggleGroup>
    </>
  )
}

گروه برچسب‌دار

label، sublabel و information همان سربرگ فیلدی را می‌سازند که Text Input می‌گیرد، تا یک toggle داخل فرم با بقیه تراز بماند.

import { Toggle, ToggleGroup, Icon } from "@nili/ui"
import { RiSunLine, RiMoonLine, RiComputerLine } from "@remixicon/react"

export function Example() {
  const [theme, setTheme] = useState("system")

  return (
    <ToggleGroup
      value={theme}
      onValueChange={setTheme}
      label="Appearance"
      sublabel="(syncs across devices)"
      information
      informationLabel="How we choose your theme"
    >
      <Toggle value="light" startIcon={<Icon icon={RiSunLine} />}>Light</Toggle>
      <Toggle value="dark" startIcon={<Icon icon={RiMoonLine} />}>Dark</Toggle>
      <Toggle value="system" startIcon={<Icon icon={RiComputerLine} />}>System</Toggle>
    </ToggleGroup>
  )
}

غیرفعال

کل گروه را غیرفعال کنید، یا فقط گزینه‌ای را که برای این حساب در دسترس نیست.

کل گروه
یک گزینه
import { Toggle, ToggleGroup } from "@nili/ui"

export function Example() {
  return (
    <>
      <ToggleGroup defaultValue="grid" disabled ariaLabel={t('view.label')}>
        <Toggle value="grid">Grid</Toggle>
        <Toggle value="list">List</Toggle>
      </ToggleGroup>

      <ToggleGroup defaultValue="grid" ariaLabel={t('view.label')}>
        <Toggle value="grid">Grid</Toggle>
        <Toggle value="table" disabled>Table</Toggle>
      </ToggleGroup>
    </>
  )
}