מאפייני CSS להתאמה אישית של Places UI Kit

בחירת פלטפורמה: Android iOS JavaScript

ערכת Places UI Kit תומכת במגוון הגדרות ומאפייני CSS בהתאמה אישית כדי להגדיר את רכיבי התצוגה. בטבלת העזר של מאפייני CSS אפשר לראות איך להחיל את המאפיינים האלה על ערכת ממשק המשתמש.

אתם יכולים להשתמש בכלי ההתאמה האישית כדי לראות איך קבוצות שונות של מאפיינים ישפיעו על המראה של רכיב פרטי המקום, ולגשת לקוד ב-HTML/CSS, ב-Kotlin/XML וב-Swift.

מאפייני CSS שממופים לרכיבים של Places UI Kit

Places UI Kit מציע גישה של מערכת עיצוב להתאמה אישית של רכיבים חזותיים, המבוססת בקירוב על Material Design (עם כמה שינויים ספציפיים למפות Google). אפשר לעיין בחומר העזר של Material Design בנושא צבע וטיפוגרפיה. כברירת מחדל, הסגנון תואם לשפה העיצובית של מפות Google.

מאפייני CSS

נכס רכיב Details Compact רכיב הפרטים שימוש
צבע (מערכת)
--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 ✔ תוכן התג של מטען לרכב חשמלי זמין
--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-popular-times-bar-color ✔ עמודות ההיסטוגרמה של שעות פופולריות, לא כולל השעות הנוכחיות
--gmp-popular-times-bar-current-hour-color ✔ עמודה בהיסטוגרמה של שעות פופולריות לשעה הנוכחית
--gmp-popular-times-bar-current-hour-live-color ✔ עמודה בהיסטוגרמה של שעות פופולריות וטקסט סטטוס של השעה הנוכחית, כשנתונים בזמן אמת זמינים
טיפוגרפיה (מערכת)
--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 מתאימים את עצמם באופן אוטומטי לערכת הצבעים המועדפת על המשתמש, ומזהים אם הדפדפן או המערכת של המשתמש מוגדרים למצב בהיר או מצב כהה. המראה של הרכיב ישתנה באופן אוטומטי בהתאם להעדפות של המשתמש.

רכיבים של Places UI Kit במצב בהיר ובמצב כהה

כשאתם מחילים סגנונות מותאמים אישית, חשוב לבדוק את השינויים גם במצב בהיר וגם במצב כהה כדי למנוע חוסר עקביות חזותית. אם באפליקציה שלכם יש עיצוב קבוע אחד, המעבר האוטומטי בין העיצובים עלול לפגוע בחוויית המשתמש. לדוגמה, רכיב בעיצוב כהה יכול להופיע באפליקציה בעיצוב בהיר. כדי למנוע את זה, אפשר לאלץ את הרכיב להופיע תמיד בעיצוב ספציפי על ידי הגדרת color-scheme ב-CSS.

שיוך למותג במפות Google

נכס רכיב Details Compact רכיב הפרטים שימוש
(שחור | לבן | אפור) ✔ ✔ שיוך למותג של מפות Google,
כפתור גילוי נאות של מפות Google

בתנאים ובהגבלות של מפות Google מצוין שצריך להשתמש באחד משלושת צבעי המותג לשיוך של מפות Google. השיוך הזה חייב להיות גלוי ונגיש כשמבצעים שינויים בהתאמה אישית. מידע נוסף זמין במאמר דרישות ייחוס.

אנחנו מציעים בחירה בין שלושה צבעי מותג שאפשר להגדיר בנפרד לעיצובים בהירים וכהים: 

<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>