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

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

خصائص CSS التي تم ربطها بعناصر Places UI Kit

تقدّم حزمة أدوات واجهة المستخدم الخاصة بـ "الأماكن" أسلوبًا لنظام التصميم يتيح التخصيص المرئي استنادًا إلى التصميم المتعدد الأبعاد (مع بعض التعديلات الخاصة بـ "خرائط Google"). يمكنك الاطّلاع على مرجع Material Design الخاص بالألوان وأسلوب الخط. يتوافق النمط تلقائيًا مع لغة التصميم المرئي في "خرائط Google".

أداة التخصيص

استخدِم هذه الأداة لتمثيل الإعدادات المخصّصة بيانيًا في أحد عناصر Places UI Kit.

خصائص CSS

الموقع Details Compact Element عنصر التفاصيل الاستخدام
اللون (النظام)
--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"

الموقع Details Compact Element عنصر التفاصيل الاستخدام
(أسود | أبيض | رمادي) ✔ ✔ بيانات تحديد المصدر الخاصة بالعلامة التجارية على "خرائط 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>