النماذج والملاحظات

يتضمن Text.js عناصر تحكم للنماذج ومربعات حوار وإشعارات عابرة. ينضم كل عنصر تحكم إلى ترتيب التنقل بمفتاح Tab ويستجيب لمفتاح Space أو Enter.

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

#عناصر التحكم

تقبل جميعها autoFocus و focused و id و disabled. تعمل في الوضع المتحكم فيه وغير المتحكم فيه (defaultChecked، defaultValue).

#الأزرار

تكون قيمة variant إحدى القيم primary أو secondary أو ghost أو danger. يملأ التركيز الزر بلون التمييز دون تغيير حجمه.

#<Dialog>

مكوّن <Modal> مع وصف وصفّ للإجراءات.

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

نعم أو لا. يجيب المفتاحان y و n مباشرة؛ وينقل المفتاحان ← و → التركيز بين الأزرار. يحدد destructive نمط زر التأكيد ويركز على زر «إلغاء» أولًا.

<Confirm  open={confirming}  destructive  title="Delete project?"  message="This removes acme-web and all 312 deployments."  confirmLabel="Delete"  onConfirm={remove}  onCancel={() => setConfirming(false)}/>

#الإشعارات العابرة

اعرض مكوّن <Toaster /> واحدًا، ثم استدعِ useToast() في أي موضع ضمن الجذر نفسه.

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",});

تُعرض الإشعارات العابرة فوق مربعات الحوار المشروطة ولا تستحوذ على التركيز أبدًا.