Styling سفارشی کیت UI مکان ها

Places UI Kit از انواع تنظیمات و ویژگی های CSS سفارشی برای پیکربندی عناصر نمایشگر پشتیبانی می کند. از ابزار سفارشی سازی و جدول مرجع خواص CSS در زیر استفاده کنید تا ببینید چگونه می توان این ویژگی ها را در کیت UI اعمال کرد.

ویژگی های CSS به عناصر Places UI Kit نگاشت شده است

کیت UI Places یک رویکرد سیستم طراحی را برای سفارشی‌سازی بصری تقریباً بر اساس طراحی متریال (با برخی تغییرات خاص Google Maps) ارائه می‌کند. به مرجع طراحی متریال برای رنگ و تایپوگرافی مراجعه کنید. به طور پیش فرض، این سبک به زبان طراحی بصری Google Maps پایبند است.

ابزار سفارشی سازی

از این ابزار برای تجسم پیکربندی های سفارشی در یک عنصر Places UI Kit استفاده کنید.

ویژگی های CSS

اموال جزئیات عنصر فشرده عنصر جزئیات استفاده
رنگ (سیستم)
--gmp-mat-color-surface ✔ ✔ پس زمینه ظرف و دیالوگ
--gmp-mat-color-on-surface ✔ ✔ سرفصل ها، محتوای گفتگو
--gmp-mat-color-on-surface-variant ✔ ✔ اطلاعات مکان
--gmp-mat-color-primary ✔ ✔ پیوندها، نشانگر بارگیری، نمادهای نمای کلی
--gmp-mat-color-disabled-surface ✔ رتبه بندی ستاره پر نشده
--gmp-mat-color-positive ✔ ✔ اکنون برچسب "باز" ​​را قرار دهید
--gmp-mat-color-positive-container ✔ نشان شارژر EV موجود
--gmp-mat-color-on-positive-container ✔ محتوای نشان شارژر EV موجود است
--gmp-mat-color-negative ✔ ✔ اکنون برچسب "بسته" را قرار دهید
--gmp-mat-color-info ✔ ✔ نماد ورودی قابل دسترسی
--gmp-mat-color-secondary-container ✔ ✔ پس زمینه دکمه
--gmp-mat-color-on-secondary-container ✔ ✔ متن و نماد دکمه
--gmp-mat-color-neutral-container ✔ ✔ نشان تاریخ را مرور کنید، اشکال نگه‌دارنده را بارگیری کنید
--gmp-mat-color-on-neutral-container ✔ ✔ تاریخ بازبینی، خطای بارگذاری
--gmp-mat-color-outline-decorative ✔ ✔ حاشیه کانتینر
تایپوگرافی (سیستم)
--gmp-mat-font-family ✔ ✔ فونت پایه برای همه تایپوگرافی ها
--gmp-mat-font-display-small ✔ نام مکان
--gmp-mat-font-headline-medium ✔ ✔ سرفصل های گفتگو
--gmp-mat-font-title-small ✔ نام مکان
--gmp-mat-font-body-medium ✔ اطلاعات مکان، محتوای گفتگو
--gmp-mat-font-body-small ✔ اطلاعات مکان
--gmp-mat-font-label-large ✔ ✔ محتوای دکمه
--gmp-mat-font-label-medium ✔ محتوای نشان
ظرف (جزء)
border (در :host) ✔ ✔ ظرف
border-radius (روی :host) ✔ ✔ ظرف

اسناد نام تجاری Google Maps

اموال جزئیات عنصر فشرده عنصر جزئیات استفاده
(سیاه | سفید | خاکستری) ✔ ✔ اسناد نام تجاری Google Maps،
دکمه افشای نقشه های گوگل

شرایط خدمات Google Maps از شما می‌خواهد که از یکی از سه رنگ مارک برای انتساب Google Maps استفاده کنید. وقتی تغییرات سفارشی‌سازی انجام می‌شود، این انتساب باید قابل مشاهده و قابل دسترسی باشد. برای اطلاعات بیشتر به الزامات Attribution مراجعه کنید.

ما انتخابی از سه رنگ مارک را ارائه می دهیم که می توانند به طور مستقل برای تم های روشن و تاریک تنظیم شوند:

<gmp-place-content-config>
  <gmp-place-attribution
      light-scheme-color="black"
      dark-scheme-color="white"
  ></gmp-place-attribution>
</gmp-place-content-config>