צ'יפ

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

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

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

פלטפורמת ה-API

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

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

צ'יפ עזרה

הרכיב הניתן לTex-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)
            )
        }
    )
}

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

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

סמל מסנן

כדי להשתמש ברכיב ה-Composable‏ 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
        },
    )
}

כך נראית ההטמעה הזו כשהיא לא נבחרת:

צ'יפ סינון שלא נבחר, בלי סימן וי ועם רקע פשוט.
איור 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)
            )
        },
    )
}

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

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

הצעות קשורות

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

נניח שהטמעתם את SuggestionChip באופן הבא:

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

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

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

צ'יפ מובלט

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

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