צ'יפ

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

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

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

משטח API

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

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

צ'יפ של מסייע

רכיב ה-Composable‏ 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

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

סמל מסנן שהוחל

רכיב ה-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
        },
    )
}
Chip.kt

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

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

צ'יפ קלט

אפשר להשתמש ברכיב 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

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

הצעות קשורות

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

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

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

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

צ'יפ בולט

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

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

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

• מסמכי Material UI