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

Switch

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

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

حالت‌ها

سوییچ بی‌درنگ اثر می‌کند — اگر تغییر به دکمهٔ ذخیره نیاز دارد، چیزی که می‌خواهید Checkbox است. onCheckedChange با وضعیت تازه صدا زده می‌شود؛ رویداد خام هم اگر واقعاً لازم داشتید به‌عنوان onInputChange سر جایش است.

import { Switch } from "@nili/ui"

export function Example() {
  const [enabled, setEnabled] = useState(true)

  return (
    <>
      <Switch label={t('states.off')} />
      <Switch label={t('states.on')} defaultChecked />
      <Switch
        label="Controlled"
        checked={enabled}
        onCheckedChange={setEnabled}
      />
      <Switch label={t('states.disabled')} disabled />
      <Switch label={t('states.disabledOn')} disabled defaultChecked />
    </>
  )
}

ردیف برچسب

همان چهار اسلات Checkbox و Radio — sublabel، badge، description، linkButton — تا فهرست تنظیماتی که از هر سه ساخته شده با هم تراز بماند.

(اختیاری)
(پیشنهادی)امندر هر ورود، کدی از اپلیکیشن احرازهویت‌تان می‌خواهیم.افزودن دستگاه جدید
import { Switch, Badge, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <Switch
      defaultChecked
      label="Two-factor authentication"
      sublabel="(recommended)"
      badge={<Badge size="small" color="green" appearance="lighter">Secure</Badge>}
      description="We will ask for a code from your authenticator app at every sign-in."
      linkButton={<LinkButton href="#" size="sm">Set up a new device</LinkButton>}
    />
  )
}

جای برچسب

در یک فهرست تنظیمات، سوییچ معمولاً انتهای ردیف و دور از متن می‌نشیند. منطقی است، پس از جهت خواندن پیروی می‌کند.

labelPosition برابر start است
labelPosition برابر end است — پیش‌فرض
import { Switch } from "@nili/ui"

export function Example() {
  return (
    <>
      <Switch label="Switch after the label" labelPosition="start" />
      <Switch label="Switch before the label" labelPosition="end" />
    </>
  )
}

بدون برچسب

به سوییچ خالی یک aria-label بدهید — کلیدی که نام ندارد فقط به‌صورت «سوییچ» اعلام می‌شود و بس.

import { Switch } from "@nili/ui"

export function Example() {
  return <Switch aria-label="Dark mode" />
}

در یک فهرست تنظیمات

شکل رایجش: ردیفی از سوییچ‌ها با توضیح، برچسب اول و کنترل در انتها.

به‌روزرسانی‌های محصول و هشدارهای امنیتی.
فقط روی همین دستگاه.
هر دوشنبه صبح یک خلاصه.
import { Switch } from "@nili/ui"

export function Example() {
  return (
    <div className="divide-y divide-soft-200 rounded-xl border border-soft-200">
      <div className="p-4">
        <Switch
          labelPosition="start"
          label="Email notifications"
          description="Product updates and security alerts."
          defaultChecked
        />
      </div>
      …
    </div>
  )
}