Surface
ظرفِ خنثیِ زیرِ Card، بدون سرصفحه/بدنه/پاصفحهٔ ازپیشساخته، فقط یک پسزمینه با سه سطح ارتفاع بصری برای گروهبندی محتوا یا تودرتو کردن کامپوننتهای دیگر.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/surface.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/surface.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/surface.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/surface.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { Surface } from "@/components/ui/surface"
<Surface variant="flat" className="p-4">
محتوای دلخواه
</Surface>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
Surface خودش padding نمیگذارد؛ با className (مثل p-4) اضافه کنید.
کامپوننتهایی مثل Textarea یک variant flat (بدون سایهٔ خودشان) دارند که دقیقاً برای نشستن داخل یک Surface flat/outline طراحی شده، تا دو سایه روی هم جمع نشود.
دسترسپذیری
- یک ظرف بصری صِرف است و نقش ARIA ندارد؛ اگر محتوایش معنای معنایی خاصی دارد (مثل بخش) خودتان role/aria-label بگذارید.
مرجع API
Surface
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| variant | "elevated" | "flat" | "outline" | "elevated" | elevated سایه دارد، flat پسزمینهٔ خاکستری خنثی، outline فقط حاشیه. |
| asChild | boolean | false | رندر استایل روی فرزند بهجای div. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
سه سطح
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
میزبانِ Textarea بدونسایه
Textarea با variant="flat" داخل یک Surface flat جا میشود چون خودش سایه ندارد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| سه سطح | انتخاب سطح مناسب برای ظرف بر اساس زمینهای که رویش قرار میگیرد |
| میزبانِ Textarea بدونسایه | Textarea با variant="flat" داخل یک Surface flat جا میشود چون خودش سایه ندارد. |