Etkileşimli bileşenler
<Input>, <Textarea>, <Select> ve <Tabs>: odak, kısayollar ve sayfa odakta değilken metin kopyalama.
Bu girdiler klavyeyle kontrol edilir ve kendi odaklarını yönetir.
CanlıTab next field · Enter submittsx
<Box className="flex-col gap-1 p-1"> <Input placeholder="my-text-app" autoFocus /> <Select options={regions} value={region} onChange={setRegion} /> <Tabs tabs={plans} activeTab={plan} onChange={setPlan} variant="pill" /></Box>Odak
Tab ve Shift+Tab odağı sırayla değiştirir. autoFocus, bileşen bağlandığında odağı alır.
const { isFocused } = useFocus({ autoFocus: true });useFocusManager().focus("search");Odaklanmış düzenleyiciler tuş olaylarını tüketir, bu yüzden 1 yazmak hiçbir zaman genel bir kısayolu tetiklemez.
<Input>
Readline tarzı düzenleme sunan tek satırlı girdi.
| Prop | Açıklama |
|---|---|
value / onChange | Kontrollü değer |
onSubmit | Enter tuşuna basıldığında çağrılır |
placeholder | Boşken gösterilir |
mask | Gizli bilgiler için maskeleme karakteri |
<Textarea>
Çok satırlı metin düzenleyici. Enter gönderir, Shift+Enter yeni satır ekler.
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
İsteğe bağlı bulanık arama sunan, klavyeyle kontrol edilen seçenek listesi.
| Prop | Açıklama |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | Enter tuşuna basıldığında çağrılır |
searchable | Yazılan metin seçenekleri filtreler |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />Odak dışındaki imleç
Sayfa odağı kaybettiğinde imleçler donar ve kareler durur, böylece konsol metnini seçip kopyalayabilirsiniz.