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

تتيح حزمة 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>