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، فيتحاذى المفتاح داخل النموذج مع كل ما حوله.

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