Input Group
Input را با یک دکمه یا متن ثابت (مثل پیشوند dig.ir/ یا دکمهٔ جستجو) در یک نوار پیوسته با حاشیهٔ مشترک کنار هم میگذارد؛ همان تکنیک Button Group، برای Input.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/input-group.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/input-group.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/input-group.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/input-group.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { InputGroup } from "@/components/ui/input-group"
<InputGroup>
<Input placeholder="جستجو…" />
<Button variant="outline" size="icon"><Search /></Button>
</InputGroup>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
InputGroup فقط چیدمان و هممرزی بصری را میسازد؛ خودِ Input و Button معمولی دیگ داخلش مینشینند.
برای آیکون کوچکِ داخل همان کادر (بدون مرز جدا) بهجای InputGroup از startContent/endContent خودِ Input استفاده کنید؛ InputGroup برای عناصر کاملاً مجزا (دکمهٔ ارسال، متن ثابت) است.
دسترسپذیری
- InputGroup خودش نقش ARIA ندارد؛ هر Input و Button ARIA خودشان را حفظ میکنند.
- دکمهٔ داخل گروه حتماً aria-label بگیرد اگر فقط آیکون دارد.
مرجع API
InputGroup
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| children | React.ReactNode | — | Input بههمراه Button/ButtonGroupText دیگ. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
با متن ثابت (پیشوند)
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
با دکمهٔ ارسال
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
در حال ارسال (Loading)
فیلد و دکمه باید با هم قفل شوند، وگرنه کاربر میتواند ایمیل را وسط ارسال عوض کند. هر دو عضوِ InputGroup را جدا غیرفعال کنید؛ خودِ InputGroup فقط چیدمان است و state ندارد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| با متن ثابت (پیشوند) | فیلد ساخت آدرس دلخواه که یک بخشش همیشه ثابت است، مثل زیردامنه |
| با دکمهٔ ارسال | فرم خبرنامه که فیلد و دکمهٔ عضویت باید یک واحد بصری دیده شوند |
| در حال ارسال (Loading) | فرم عضویت با ایمیل و دکمهٔ چسبیده |