סרגלי גלילה מציינים את מיקומו של משתמש במסמך שהוא גדול משטח התצוגה. הן מאפשרות למשתמשים לנווט לשאר המסמך על ידי הזזת אזור התצוגה של החלון למעלה או למטה.
המשתמשים מקיימים אינטראקציה עם פסי גלילה באמצעות מגע, גלגל חוגה או לוח מגע. הקשה על החיצים בסרגל הגלילה תזיז את התוכן לפי "דפים" - כלומר, במרווחים מקבילים לגובה של המסך. עם זאת, אם משתמשים נוטפים במהירות כדי לגלול (בהתאם לרגישות של מסך המגע), תנועת ההנעה יכולה ליצור מומנטום אינטי שגולל מעבר לדף אחד. בלי קשר לאופן שבו מופעלת הגלילה, תנועת הגלילה תמיד צריכה להצמיד לפריט.
אנטומיה
סרגל הגלילה מורכב מלחצני גלילה למעלה וגלילה למטה וממחוון ההתקדמות של הגלילה. מודעות חץ משמשים באפקט גלילה כדי לציין את כיוון הגלילה. מחוון התקדמות הגלילה הוא רכיב אופציונלי שמציין את התוכן הגלוי ואת מיקום הגלילה ביחס לכמות התוכן הכוללת בדף.
הערה: מחוון התקדמות הגלילה לא מיועד לגרירה.
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-anatomy-1.png?authuser=0000&hl=he)
2. מחוון התקדמות גלילה
3. מחיר מוזל בגלילה למטה
מפרטים
מיקום של סרגל גלילה עם ניווט ראשי מוערם וסרגל בקרה ממוזער
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-1.png?authuser=0000&hl=he)
מיקום סרגל הגלילה עם כותרת האפליקציה בלבד
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-2.png?authuser=0000&hl=he)
מיקום סרגל הגלילה עם כותרת האפליקציה וסרגל הבקרה
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-3.png?authuser=0000&hl=he)
המיקום של סרגל הגלילה עם כותרת האפליקציה וסרגל הבקרה המורחב
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-4.png?authuser=0000&hl=he)
המיקום של סרגל הגלילה עם הכותרת או סרגל האפליקציה וסרגל פקדים ממוזער
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-5.png?authuser=0000&hl=he)
מיקום סרגל הגלילה רק עם סרגל האפליקציה/כותרת
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-6.png?authuser=0000&hl=he)
מיקום סרגל הגלילה עם כותרת האפליקציה וסרגל הבקרה
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-7.png?authuser=0000&hl=he)
המיקום של סרגל הגלילה עם כותרת האפליקציה וסרגל הבקרה המורחב
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-8.png?authuser=0000&hl=he)
המיקום של סרגל הגלילה עם גובה המסך קצר
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-9.png?authuser=0000&hl=he)
אינדיקטור אופציונלי של התקדמות הגלילה
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-spec-10.png?authuser=0000&hl=he)
סגנונות
צבע
רכיב | צבע(מצב יום) | צבע (מצב לילה) |
---|---|---|
סמלים ראשיים – מצב פעיל | לבן | לבן @ 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=0000&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-mock-2.png?authuser=0000&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-mock-3.png?authuser=0000&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/scrollbar-mock-4.png?authuser=0000&hl=he)