Surfacev1.0.0
ظرفِ خنثیِ زیرِ Card، بدون سرصفحه/بدنه/پاصفحهٔ ازپیش‌ساخته، فقط یک پس‌زمینه با سه سطح ارتفاع بصری برای گروه‌بندی محتوا یا تودرتو کردن کامپوننت‌های دیگر.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/surface.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/surface.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/surface.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/surface.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { Surface } from "@/components/ui/surface"
<Surface variant="flat" className="p-4">
محتوای دلخواه
</Surface>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
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 پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
سه سطح
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
میزبانِ Textarea بدون‌سایه
Textarea با variant="flat" داخل یک Surface flat جا می‌شود چون خودش سایه ندارد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| سه سطح | انتخاب سطح مناسب برای ظرف بر اساس زمینه‌ای که رویش قرار می‌گیرد |
| میزبانِ Textarea بدون‌سایه | Textarea با variant="flat" داخل یک Surface flat جا می‌شود چون خودش سایه ندارد. |