«کیت میانای کاربر جاها» از تنظیمات مختلف و ویژگی‌های CSS سفارشی برای پیکربندی عناصر نمایش پشتیبانی می‌کند. از این جدول مرجع ویژگی‌های CSS استفاده کنید تا ببینید چگونه این ویژگی‌ها می‌توانند در UI Kit اعمال شوند.
از ابزار سفارشی‌سازی برای تجسم اینکه چگونه مجموعه‌های مختلف ویژگی‌ها بر ظاهر عنصر «جزئیات مکان‌ها» تأثیر می‌گذارند استفاده کنید و به کد در HTML/CSS، Kotlin/XML، و Swift دسترسی پیدا کنید.
«کیت میانای کاربر جاها» رویکرد سیستم طراحی را برای سفارشی‌سازی دیداری تقریباً براساس طراحی مواد (با برخی اصلاحات خاص Google Maps) ارائه می‌دهد. مرجع «طراحی مواد» را برای رنگ و نویسه‌نگاری ببینید. به‌طور پیش‌فرض، سبک از زبان طراحی دیداری Google Maps پیروی می‌کند.
دارایی‌های 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 |
✔ | نشان شارژر خودرو برقی دردسترس | |
--gmp-mat-color-on-positive-container |
✔ | محتوای نشان شارژر خودرو برقی دردسترس | |
--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) |
✔ | ✔ | ظرف |
آرایش رنگ‌های پیش‌فرض
به‌طور پیش‌فرض، مؤلفه‌های «کیت میانای کاربر جاها» به‌طور خودکار با طرح رنگ ترجیحی کاربر سازگار می‌شوند، و تشخیص می‌دهند که آیا کاربر مرورگر یا سیستم خود را روی حالت روشن یا تیره تنظیم کرده است یا نه. ظاهر مؤلفه به‌طور خودکار تنظیم می‌شود تا با اولویت کاربر مطابقت داشته باشد.
هنگام اعمال سبک‌های سفارشی خودتان، حتماً تغییرات را در هر دو حالت روشن و تاریک آزمایش کنید تا از ناهماهنگی‌های بصری جلوگیری شود. اگر برنامه شما از یک زمینه ثابت استفاده می‌کند،
تغییر خودکار زمینه می‌تواند منجر به تجربه کاربری ضعیف شود. برای مثال، ممکن است مؤلفه‌ای با زمینه تیره در برنامه شما با زمینه روشن ظاهر شود. برای جلوگیری از این اتفاق، می‌توانید با تنظیم color-scheme در CSS، مؤلفه را مجبور کنید همیشه در زمینه خاصی ارائه شود.
ارجاع نمانام Google Maps
| دارایی | عنصر فشرده جزئیات | عنصر جزئیات | کاربرد |
|---|---|---|---|
| (black | white | gray) | ✔ | ✔ | نمانام Google Maps، دکمه شفاف‌سازی Google Maps |
شرایط خدمات Google Maps شما را ملزم می‌کند که از یکی از سه رنگ نمانام برای ذکر منبع Google Maps استفاده کنید. این ارجاع باید هنگام اعمال تغییرات سفارشی‌سازی قابل‌مشاهده و دردسترس باشد. برای اطلاعات بیشتر، الزامات ارجاع را ببینید.
سه رنگ نمانام را برای انتخاب ارائه می‌دهیم که می‌توانند به‌طور مستقل برای زمینه‌های روشن و تیره تنظیم شوند:
- زمینه روشن:
PlaceAttributionElement.lightSchemeColorبا مشخصه‌های سفید، خاکستری، و سیاه. - زمینه تیره:
PlaceAttributionElement.darkSchemeColorبا مشخصه‌های سفید، خاکستری، و سیاه.
<gmp-place-details-compact>
<gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
<gmp-place-name></gmp-place-name>
<gmp-place-rating></gmp-place-rating>
<gmp-place-attribution
light-scheme-color="black"
dark-scheme-color="white"
></gmp-place-attribution>
</gmp-place-details-compact>