رفتن به محتوا
پیوند

مدال

روی صفحه باز می‌شود تا کاربر یک کار را بی‌حواس‌پرتی تمام کند.

گونه‌ها

جهت نمونه‌ها
تم نمونه‌ها
modal
sheet
detail
search
در صفحه‌های باریک‌تر از ۶۰۰ پیکسل، مدال به شکل باتم‌شیت باز می‌شود.

اندازه‌ها

کوچک۴۰۰
متوسط۴۸۰
بزرگ۶۴۰

محتوا

هدر با آیکون، یک دکمه
هدر بی‌آیکون، دو دکمه
هدر با آیکون، دو دکمه
متن بلند

حرکت

حرکت مدال تبدیل (Container transform) است: دکمه‌ای که مدال را باز می‌کند، در ۵۰۰ میلی‌ثانیه خودش دکمه اصلی مدال می‌شود، مدال از وسط آن باز می‌شود و برچسبش بالای مدال عنوان می‌شود. مدال تأیید و مدالی که بی‌دکمه باز شود حرکت کاغذ دارند و در ۴۰۰ میلی‌ثانیه آرام سر جایشان می‌نشینند.

با تو سفره‌ای رنگ می‌گیرد

با کمک شما بسته غذایی خانواده‌ها کامل‌تر می‌شود و سفره‌شان رنگ می‌گیرد.
پیشرفت کمپین۶۸٪ از هدف

با تو سفره‌ای رنگ می‌گیرد

با کمک شما بسته غذایی خانواده‌ها کامل‌تر می‌شود و سفره‌شان رنگ می‌گیرد.
پیشرفت کمپین۶۸٪ از هدف
دکمه «حمایت می‌کنم» با رنگ کهربایی خودش تا دکمه پرداخت مدال می‌رود و همان می‌شود و مدال از وسط آن باز می‌شود. برچسبش عنوان مدال می‌شود و قلب به هدر می‌رود. موقع بستن، دکمه پرداخت دوباره «حمایت می‌کنم» می‌شود. در موبایل باتم‌شیت هم همین‌طور از دل دکمه باز می‌شود. همه تبدیل‌ها
کاغذ
دکمه را بزنید. اگر «کاهش حرکت» در دستگاهتان روشن باشد، مدال فقط در ۱۵۰ میلی‌ثانیه سر جایش پیدا می‌شود.

ساختار

آیکون‌ها
Close
توکن‌ها
  • رنگcolor-on-surface, color-outline-variant, color-primary, color-primary-container, color-scrim, color-surface-container-lowest
  • فاصلهspace-1, space-10, space-16, space-2, space-20, space-3, space-4, space-5, space-6, space-8
  • اندازهsize-control-lg, size-window, size-window-large, size-window-medium, size-window-small, size-window-xlarge
  • فرم و حاشیهshape-corner-full, shape-corner-md, shape-corner-shape, shape-corner-window
  • سطح و ارتفاعelevation-scrim, elevation-shadow-level1, elevation-shadow-level3, z-index-dialog
  • حرکتmotion-transition-fade
به کار رفته در
هنوز هیچ جزء بزرگ‌تری از آن استفاده نمی‌کند.