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