کیت رابط کاربری Places از تنظیمات و ویژگیهای CSS سفارشی متنوعی برای پیکربندی عناصر نمایشی پشتیبانی میکند. از این جدول مرجع ویژگیهای CSS برای مشاهده نحوه اعمال این ویژگیها به کیت رابط کاربری استفاده کنید.
از ابزار سفارشیسازی برای تجسم چگونگی تأثیر مجموعههای مختلف ویژگیها بر ظاهر یک عنصر Places Details استفاده کنید و به کد موجود در HTML/CSS، Kotlin/XML و Swift دسترسی پیدا کنید.
کیت رابط کاربری Places یک رویکرد سیستم طراحی برای سفارشیسازی بصری ارائه میدهد که تقریباً مبتنی بر طراحی متریال (با برخی اصلاحات خاص نقشههای گوگل) است. برای رنگ و تایپوگرافی به مرجع طراحی متریال مراجعه کنید. به طور پیشفرض، این سبک به زبان طراحی بصری نقشههای گوگل پایبند است.
ویژگیهای 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) | ✔ | ✔ | کانتینر |
طرح رنگ پیشفرض
به طور پیشفرض، اجزای Places UI Kit به طور خودکار با طرح رنگی مورد نظر کاربر سازگار میشوند و تشخیص میدهند که آیا کاربر مرورگر یا سیستم خود را روی حالت روشن یا تاریک تنظیم کرده است. ظاهر اجزا به طور خودکار تنظیم میشود تا با ترجیح کاربر مطابقت داشته باشد.
هنگام اعمال سبکهای سفارشی خود، اطمینان حاصل کنید که تغییرات خود را در هر دو حالت روشن و تیره آزمایش میکنید تا از ناهماهنگیهای بصری جلوگیری شود. اگر برنامه شما از یک تم ثابت و واحد استفاده میکند، تغییر خودکار تم میتواند منجر به تجربه کاربری ضعیف شود. به عنوان مثال، ممکن است یک کامپوننت با تم تیره در برنامه با تم روشن شما ظاهر شود. برای جلوگیری از این امر، میتوانید با تنظیم color-scheme در CSS، کامپوننت را مجبور کنید که همیشه در یک تم خاص رندر شود.
انتساب برند گوگل مپ
| ملک | جزئیات عنصر فشرده | عنصر جزئیات | کاربرد |
|---|---|---|---|
| (مشکی | سفید | خاکستری) | ✔ | ✔ | انتساب برند گوگل مپ، دکمه افشای اطلاعات در گوگل مپ |
شرایط خدمات نقشههای گوگل شما را ملزم میکند که از یکی از سه رنگ برند برای انتساب نقشههای گوگل استفاده کنید. این انتساب باید هنگام انجام تغییرات سفارشیسازی قابل مشاهده و دسترسی باشد. برای اطلاعات بیشتر به الزامات انتساب مراجعه کنید.
ما سه رنگ از برند را ارائه میدهیم که میتوانند به طور مستقل برای تمهای روشن و تیره تنظیم شوند:
- تم روشن:
PlaceAttributionElement.lightSchemeColorبا ویژگیهای سفید، خاکستری و سیاه. - تم تیره:
PlaceAttributionElement.darkSchemeColorبا ویژگیهای سفید، خاکستری و سیاه.
<gmp-place-content-config>
<gmp-place-attribution
light-scheme-color="black"
dark-scheme-color="white"
></gmp-place-attribution>
</gmp-place-content-config>