עיצוב מותאם אישית של Places UI Kit

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

מאפייני CSS שממופים לרכיבים של ערכת ממשק המשתמש של Places

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

כלי להתאמה אישית

אפשר להשתמש בכלי הזה כדי להציג באופן חזותי הגדרות בהתאמה אישית ברכיב 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 ✔ ✔ בדיקת תג התאריך, טעינה של צורות placeholder
--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

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

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

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

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