Close Button
یک دکمهٔ گرد فقط-آیکون برای بستن؛ برای بنر، کارت اعلان یا هر سطحی که نمیخواهید از Dialog/Sheet آماده استفاده کنید.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/close-button.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/close-button.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/close-button.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/close-button.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { CloseButton } from "@/components/ui/close-button"
<CloseButton onClick={() => setOpen(false)} />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
CloseButton یک دکمهٔ مستقل است، نه بخشی از Dialog/Sheet/AlertDialog؛ آنها دکمهٔ بستنِ خودشان را دارند.
این کامپوننت برای سطوح سفارشی (بنر، کارت اعلان، Surface) است که خودتان state باز/بسته را مدیریت میکنید.
دسترسپذیری
- aria-label پیشفرض «بستن» دارد؛ برای زمینههای خاصتر (مثل «بستن اعلان») مقدار label را عوض کنید.
- هاور با تغییر رنگ پسزمینه پیاده شده، نه کاهش opacity؛ روی هر رنگ زمینهای (کارت رنگی، توست) ظاهر یکسان و خوانا میماند.
مرجع API
CloseButton
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | اندازهٔ دکمه و آیکون. |
| label | string | "بستن" | متن aria-label. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
اندازهها
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
داخل کارت
بهروزرسانی تازه موجود است
نسخهٔ ۲.۴ منتشر شد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
غیرفعال (Disabled)
دکمهٔ بستن را پنهان نکنید؛ غیرفعالش کنید تا کاربر بداند چرا نمیتواند ببندد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| اندازهها | هماهنگکردن دکمهٔ بستن با اندازهٔ سطحی که رویش نشسته |
| داخل کارت | بستن یک کارت اعلان بدون بستن کل بخش |
| غیرفعال (Disabled) | دیالوگی که وسط ذخیره نباید بسته شود |