İçeriğe atla
1.6k

Anahtar

Neobrutalist tarzda kenarlık ve gölge efektleriyle tasarlanmış, bildirimler, karanlık mod ve özellik bayrakları gibi ayarları anında etkinleştirmek veya devre dışı bırakmak için bir açma/kapama düğmesi.

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

Switch, iki durumlu bir anahtardır — açık veya kapalı; çevrildiği anda uygulanır, gönder düğmesi gerekmez. Base UI Switch bileşeni üzerine kuruludur ve neobrütalist reçeteye göre stillendirilmiştir: kalın kenarlıklar, keskin gölgeler ve iddialı tipografi.

Şu durumlarda tercih edin:

  • Ayar panelleri — bildirimler, karanlık mod, otomatik oynatma: anında etkili olan tercihler.
  • Özellik bayrakları — bir beta özelliğini etkinleştirin veya aylık ile yıllık faturalandırma arasında geçiş yapın.
  • Satır bazlı kontroller — bir form açmadan tablo veya listedeki öğeleri etkinleştirin ya da duraklatın.

Kurulum

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/switch.json
npx shadcn@latest add https://neobrutalism.com/r/base/switch.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/switch.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/switch.json

Aşağıdaki bağımlılıkları yükleyin:

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Aşağıdaki kodu kopyalayıp projenize yapıştırın.

components/ui/switch.tsx
"use client"

import * as React from "react"
import { Switch as SwitchPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Switch({
  className,
  size = "default",
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
  size?: "sm" | "default"
}) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      data-size={size}
      className={cn(
        "peer group/switch relative inline-flex shrink-0 cursor-pointer items-center border-2 border-foreground transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-invalid:border-destructive data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
        className
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className="pointer-events-none mx-0.5 block border-2 border-foreground bg-primary transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-5 group-data-[size=sm]/switch:data-checked:translate-x-4 data-checked:bg-background data-unchecked:translate-x-0"
      />
    </SwitchPrimitive.Root>
  )
}

export { Switch }

İçe aktarma yollarını proje yapılandırmanıza göre güncelleyin.

Kullanım

import { Switch } from "@/components/ui/switch"
<Switch />

Örnekler

Açıklama

import {
  Field,
  FieldContent,

Seçim Kartı

FieldLabel'ın tıklanabilir bir kart deseni için tüm Field'ı sardığı kart stilinde seçim.

import {
  Field,
  FieldContent,

Devre dışı

Switch'i devre dışı bırakmak için Switch bileşenine disabled prop'unu ekleyin. Stil için Field bileşenine data-disabled prop'unu ekleyin.

import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

Geçersiz

Geçersiz bir durumu belirtmek için Switch bileşenine aria-invalid prop'unu ekleyin. Stil için Field bileşenine data-invalid prop'unu ekleyin.

import {
  Field,
  FieldContent,

Boyut

Switch'in boyutunu değiştirmek için size prop'unu kullanın.

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

RTL

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik

Switch, WAI-ARIA Switch desenini izler: role="switch" ve aria-checked içeren gerçek bir düğme, ayrıca değerin çevreleyen formla gönderilebilmesi için gizli bir input işler.

Klavye etkileşimleri:

TuşEylem
Tab / Shift + TabOdağı switch'e taşır / switch'ten uzaklaştırır
SpaceSwitch'i açıp kapatır
EnterSwitch'i açıp kapatır

API Referansı

Base UI Switch belgelerine bakın.