צ'יפ

הרכיב Chip הוא רכיב קומפקטי ואינטראקטיבי בממשק המשתמש. הוא מייצג ישויות מורכבות כמו איש קשר או תג, ולעתים קרובות כולל סמל ותווית. אפשר להגדיר אותה כהודעה שאפשר לסמן, לסגור או ללחוץ עליה.

אלה ארבעת סוגי הצ'יפים והמקומות שבהם אפשר להשתמש בהם:

  • עזרה: הדרכה למשתמש במהלך ביצוע משימה. לרוב מופיע כרכיב זמני בממשק המשתמש בתגובה לקלט של המשתמש.
  • סינון: מאפשר למשתמשים לצמצם את התוכן מתוך קבוצת אפשרויות. אפשר לבחור אותם או לבטל את הבחירה שלהם, ויכול להיות שיופיע בהם סמל של וי כשהם נבחרים.
  • קלט: מייצג מידע שהמשתמשים סיפקו, כמו בחירות בתפריט. הם יכולים להכיל סמל וטקסט, ולספק X להסרה.
  • הצעה: המלצות שמוצגות למשתמש על סמך הפעילות או הקלט האחרונים שלו. בדרך כלל מופיעים מתחת לשדה להזנת קלט כדי להנחות את המשתמש לבצע פעולות.
דוגמה לכל אחד מארבעת רכיבי הצ'יפים, עם הדגשה של המאפיינים הייחודיים שלהם.
איור 1. ארבעת רכיבי הצ'יפים.

פלטפורמת ה-API

יש ארבע פונקציות Composable שמתאימות לארבעת סוגי הצ'יפים. בקטעים הבאים מפורטים הקומפוזיציות האלה וההבדלים ביניהן. עם זאת, יש להם את אותם פרמטרים:

  • ‫label: המחרוזת שמופיעה בצ'יפ.
  • ‫icon: הסמל שמוצג בתחילת הצ'יפ. לחלק מהקומפוזבילים הספציפיים יש פרמטרים נפרדים של leadingIcon ושל trailingIcon.
  • ‫onClick: פונקציית ה-lambda שהצ'יפ מפעיל כשהמשתמש לוחץ עליו.

צ'יפ של מסייע

הקומפוזבל AssistChip מספק דרך פשוטה ליצור צ'יפ עזרה שמכוון את המשתמש לכיוון מסוים. אחד המאפיינים הייחודיים שלו הוא הפרמטר leadingIcon שמאפשר להציג סמל בצד ימין של הצ'יפ. בדוגמה הבאה אפשר לראות איך מטמיעים את התכונה:

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}
Chip.kt

ההטמעה הזו נראית כך.

צ'יפ פשוט של עזרה שמציג סמל מוביל ותווית טקסט.
איור 2. צ'יפ של Assistant.

סמל מסנן

רכיב ה-FilterChip המורכב מחייב מעקב אחרי הבחירה של הצ'יפ. בדוגמה הבאה אפשר לראות איך להציג סמל מוביל עם סימן וי רק כשהמשתמש בוחר את הצ'יפ:

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}
Chip.kt

היישום הזה נראה כך כשהוא לא נבחר:

סמל מסנן לא מסומן, ללא סימן וי ועם רקע פשוט.
איור 3. סמל מסנן לא מסומן.

וכך היא נראית כשבוחרים בה:

סמל מסנן שנבחר, עם סימן וי ורקע צבעוני.
איור 4. סמל המסנן שנבחר.

צ'יפ קלט

אפשר להשתמש ברכיב הקומפוזבילי InputChip כדי ליצור צ'יפים שנוצרים כתוצאה מאינטראקציה של משתמשים. לדוגמה, בלקוח אימייל, כשמשתמש כותב אימייל, צ'יפ קלט יכול לייצג איש קשר שהמשתמש הוסיף לשדה 'אל:'.

בדוגמה הבאה מוצג צ'יפ קלט שכבר נמצא במצב נבחר. המשתמש לוחץ על הצ'יפ כדי להסתיר אותו.

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}
Chip.kt

ההטמעה הזו נראית כך.

צ'יפ קלט עם דמות וסמל בסוף.
איור 5. צ'יפ קלט.

הצעות קשורות

רכיב ה-SuggestionChip הוא הרכיב הבסיסי ביותר מבין הרכיבים שמופיעים בדף הזה, גם בהגדרת ה-API שלו וגם בתרחישי השימוש הנפוצים שלו. הצעות הן רמזים שנוצרים באופן דינמי. לדוגמה, באפליקציית צ'אט מבוססת-AI, אפשר להשתמש בצ'יפים של הצעות כדי להציג תשובות אפשריות להודעה האחרונה.

כדאי לעיין בהטמעה הזו של SuggestionChip:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

ההטמעה הזו נראית כך:

צ'יפ הצעות קשורות.
איור 6. הצעה קשורה.

צ'יפ מובלט

כל הדוגמאות במסמך הזה משתמשות בקומפוזבילים בסיסיים עם מראה שטוח. אם רוצים להשתמש בצ'יפ עם מראה מובלט, אפשר להשתמש באחד משלושת הקודים הקומפוזביליים הבאים:

מקורות מידע נוספים