تنسيق مخصّص لمجموعة أدوات واجهة مستخدم "الأماكن"

تتيح حزمة أدوات واجهة مستخدم "الأماكن" مجموعة متنوعة من الإعدادات وخصائص CSS المخصّصة لضبط عناصر الشاشة. استخدِم أداة التخصيص وجدول مرجعي لسمات CSS أدناه لمعرفة كيفية تطبيق هذه السمات على مجموعة أدوات واجهة المستخدم.

سمات CSS التي تمّ ربطها بعناصر حزمة أدوات واجهة مستخدِم "الأماكن"

توفّر حزمة أدوات واجهة المستخدم الخاصة بالأماكن منهجًا لنظام التصميم في التخصيص المرئي يستند بشكل أساسي إلى التصميم المتعدّد الأبعاد (مع بعض تعديلات خاصة بخرائط Google). اطّلِع على مرجع Material Design للاطّلاع على اللون وأسلوب الخط. يتوافق النمط تلقائيًا مع لغة التصميم المرئي في "خرائط 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-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>