تتيح حزمة أدوات "خرائط Google" الجاهزة للأماكن مجموعة متنوعة من الإعدادات وسمات CSS المخصّصة لضبط عناصر العرض. استخدِم جدول مرجع سمات CSS هذا لمعرفة كيفية تطبيق هذه السمات على مجموعة واجهة المستخدم.
استخدِم أداة التخصيص لتصوّر كيف ستؤثر مجموعات مختلفة من السمات في مظهر عنصر "تفاصيل الأماكن" والوصول إلى الرمز البرمجي في HTML/CSS وKotlin/XML وSwift.
توفّر حزمة أدوات "خرائط Google" الجاهزة للأماكن نهجًا لنظام التصميم من أجل التخصيص المرئي استنادًا إلى التصميم المتعدد الأبعاد (مع بعض التعديلات الخاصة بـ "خرائط Google"). يمكنك الاطّلاع على مرجع التصميم المتعدد الأبعاد حول اللون وأسلوب الخط. بشكل تلقائي، يتوافق النمط مع لغة التصميم المرئي في "خرائط Google".
خصائص 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-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) |
✔ | ✔ | الحاوية |
الألوان التلقائية
تتكيّف مكوّنات حزمة أدوات "خرائط Google" الجاهزة للأماكن تلقائيًا مع نظام الألوان المفضّل لدى المستخدم، وتكتشف ما إذا كان المستخدم قد ضبط المتصفّح أو النظام على الوضع الفاتح أو الداكن. سيتم تعديل مظهر المكوّن تلقائيًا ليتطابق مع تفضيلات المستخدم.
عند تطبيق الأنماط المخصّصة، احرص على اختبار التغييرات في الوضعَين الفاتح والداكن
لمنع حدوث أي تناقضات مرئية. إذا كان تطبيقك يستخدم مظهرًا واحدًا ثابتًا، قد يؤدي التبديل التلقائي للمظهر إلى تجربة سيئة للمستخدم. على سبيل المثال، قد يظهر مكوّن بمظهر داكن في تطبيقك الذي يستخدم المظهر الفاتح. ولمنع ذلك، يمكنك فرض عرض المكوّن دائمًا بمظهر معيّن من خلال ضبط color-scheme في CSS.
تحديد مصدر سمات العلامة التجارية في "خرائط Google"
| الموقع | عنصر التفاصيل المصغّر | عنصر التفاصيل | الاستخدام |
|---|---|---|---|
| (black | white | gray) | ✔ | ✔ | سمات العلامة التجارية في "خرائط Google"، زر الإفصاح في "خرائط Google" |
تتطلّب بنود خدمة "خرائط Google" استخدام أحد ألوان العلامة التجارية الثلاثة لإسناد "خرائط Google". يجب أن تكون معلومات مصدر المحتوى هذه ظاهرة ويمكن الوصول إليها عند إجراء تغييرات على التخصيص. لمزيد من المعلومات، يُرجى الاطّلاع على متطلبات تحديد المصدر.
نوفّر ثلاثة ألوان للعلامة التجارية يمكن ضبطها بشكل مستقل للمظهرَين الفاتح والداكن:
- المظهر الفاتح:
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>