nili/ui
enfaartr
Tüm bileşenler

Toggle

Genel görünüm
7 export2 varyant ekseni23 prop4 dosya
import { Toggle, ToggleGroup } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Temel

Birkaç seçenek arasından biri, hep görünür — seçenekler kısa ve birbirini dışlayıcıyken Radio Group’un aldığı biçim. Denetlemek için value ve onValueChange, kendi hâline bırakmak için 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>
  )
}

Simgelerle

startIcon etiketten önce bir simge koyar. iconOnly etiketi kaldırıp kare bir düğme bırakır — ona bir aria-label verin, çünkü artık onu adlandıran tek şey simgedir.

etiket ve simge
yalnızca simge
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>
    </>
  )
}

Etiketli grup

label, sublabel ve information, Text Input’un aldığı alan başlığının aynısını üretir; böylece formdaki bir toggle çevresindeki her şeyle hizalanır.

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

Devre dışı

Tüm grubu ya da bu hesapta kullanılamayan tek bir seçeneği devre dışı bırakın.

tüm grup
tek seçenek
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>
    </>
  )
}