Formlar ve geri bildirim
<Button>, <Checkbox>, <Switch>, <RadioGroup>, <Slider>, <Dialog>, <Confirm> ve geçici bildirimler.
Text.js form kontrolleri, iletişim kutuları ve geçici bildirimler içerir. Her kontrol Tab sırasına katılır ve Space veya Enter tuşuna yanıt verir.
<Checkbox label="Web Analytics" description="privacy-friendly" defaultChecked /><Switch label="Edge runtime" defaultChecked /><RadioGroup orientation="horizontal" value={plan} onChange={setPlan} options={plans} /><Slider label="Concurrency" defaultValue={40} width={20} /><Button variant="primary" onPress={deploy}>Deploy</Button>Kontroller
| Bileşen | Tuşlar | Değer |
|---|---|---|
<Button> | ↵ Space | onPress |
<Checkbox> | Space ↵ | checked / onChange |
<Switch> | Space ← → | checked / onChange |
<RadioGroup> | ↑ ↓ (veya ← →) | value / onChange |
<Slider> | ← →, Shift ×5, Home End | value / onChange |
Tümü autoFocus, focused, id ve disabled özelliklerini kabul eder. Hem kontrollü hem de kontrolsüz (defaultChecked, defaultValue) kullanım çalışır.
Düğmeler
variant değeri primary, secondary, ghost veya danger olur. Odak, düğmenin boyutunu değiştirmeden içini vurgu rengiyle doldurur.
<Dialog>
Açıklaması ve eylem satırı olan bir <Modal> bileşeni.
<Dialog open={open} title="Invite teammate" description="They'll get an email with a link." onClose={close} actions={<Button variant="primary" onPress={send}>Send</Button>}> <Input autoFocus placeholder="email" /></Dialog><Confirm>
Evet veya hayır. y ve n doğrudan yanıt verir; ← → düğmeler arasında geçiş yapar. destructive onay düğmesini biçimlendirir ve önce İptal düğmesine odaklanır.
<Confirm open={confirming} destructive title="Delete project?" message="This removes acme-web and all 312 deployments." confirmLabel="Delete" onConfirm={remove} onCancel={() => setConfirming(false)}/>Geçici bildirimler
Bir <Toaster /> render edin, ardından aynı kök içinde herhangi bir yerde useToast() çağırın.
const toast = useToast();toast("Copied");toast.success("Deployed", { description: "dpl_8f2k is live on iad1." });toast.error("Build failed");await toast.promise(deploy(), { loading: "Deploying…", success: (d) => `Deployed ${d.id}`, error: "Deploy failed",});| Seçenek | Açıklama |
|---|---|
duration | Milisaniye (varsayılan 4000; yükleme bildirimleri kalır) |
id | Bir bildirimi yerinde güncellemek için yeniden kullanın |
position | <Toaster> üzerinde: bottom-right (varsayılan), top-center, … |
max | <Toaster> üzerinde: aynı anda görünen bildirim sayısı (varsayılan 3) |
Geçici bildirimler modal pencerelerin üzerinde render edilir ve asla odağı almaz.