تشير أشرطة التمرير إلى موقع المستخدم في مستند أكبر من مساحة العرض. وهي تسمح للمستخدم بالانتقال إلى باقي المستند عن طريق نقل منطقة عرض النافذة لأعلى أو لأسفل.
يتفاعل المستخدمون مع أشرطة التمرير باستخدام اللمس أو العجلة الدوّارة أو لوحة اللمس. سيؤدي النقر على الأسهم في شريط التمرير إلى نقل المحتوى حسب "الصفحات"، أي زيادات تساوي ارتفاع الشاشة. ومع ذلك، إذا كان المستخدمون ينتقلون بشكل سريع للتمرير (اعتمادًا على حساسية شاشة اللمس التي تعمل باللمس)، يمكن للحركة الانتقالية أن تنشئ زخمًا داخل الصفحة يتم تمريرها أبعد من صفحة واحدة. بغض النظر عن كيفية بدء التمرير، يجب أن تتم محاذاة حركة التمرير دائمًا إلى أحد العناصر.
علم التشريح
يتكون شريط التمرير من العناصر الخاصة بالتمرير لأعلى ولأسفل ومؤشر تقدم التمرير. تُستخدم علامات الرتبة في عناصر التمرير للإشارة إلى اتجاه التمرير. مؤشر تقدم التمرير هو عنصر اختياري يشير إلى المحتوى المرئي وموضع التمرير بالنسبة إلى إجمالي حجم المحتوى على الصفحة.
ملاحظة: لم يتم تصميم مؤشر تقدم التمرير بحيث يكون قابلاً للسحب.
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-anatomy-1.png?authuser=6&hl=ar)
2- مؤشر تقدُّم الانتقال
3- خيار الانتقال للأسفل
المواصفات
موضع شريط التمرير باستخدام شريط التنقل الأساسي المكدس وشريط التحكم المصغّر
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-1.png?authuser=6&hl=ar)
موضع شريط التمرير مع عنوان التطبيق فقط
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-2.png?authuser=6&hl=ar)
تمرير موضع الشريط باستخدام عنوان التطبيق وشريط التحكّم
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-3.png?authuser=6&hl=ar)
موضع شريط التمرير مع عنوان التطبيق وشريط التحكّم الموسّع
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-4.png?authuser=6&hl=ar)
موضع شريط التمرير مع شريط/رأس التطبيق وشريط التحكم المصغّر
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-5.png?authuser=6&hl=ar)
موضع الشريط بشريط التطبيق أو رأسه فقط
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-6.png?authuser=6&hl=ar)
تمرير موضع الشريط باستخدام عنوان التطبيق وشريط التحكّم
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-7.png?authuser=6&hl=ar)
موضع شريط التمرير مع عنوان التطبيق وشريط التحكّم الموسّع
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-8.png?authuser=6&hl=ar)
موضع شريط التمرير بارتفاع شاشة قصير
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-9.png?authuser=6&hl=ar)
مؤشر تقدم التمرير الاختياري
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-10.png?authuser=6&hl=ar)
الأنماط
اللون
عنصر | اللون(الوضع اليومي) | الألوان (الوضع الليلي) |
---|---|---|
الرموز الأساسية - الحالة النشطة | بالأبيض | أبيض @ 88٪ |
الرموز الأساسية - حالة غير نشطة | أبيض @ 56٪ | أبيض @ 50٪ |
مؤشر تقدم عملية الانتقال | أبيض @ 16٪ | أبيض @ 12٪ |
مقاسات الشعار
عنصر | الحجم (dp) |
---|---|
الرمز الأساسي | 44 |
هدف اللمس | 76 |
عرض مؤشر تقدم عملية الانتقال | 6 |
نصف قطر الزاوية مستدير الزوايا (R4) | اكتمل الشحن. |
أمثلة
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-mock-1.png?authuser=6&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-mock-2.png?authuser=6&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-mock-3.png?authuser=6&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-mock-4.png?authuser=6&hl=ar)