Button

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

בתמונה הבאה מוצגים חמשת הסוגים של לחצנים ב-Material Design.

ממשק API

• onClick: הפונקציה שנקראת כשהמשתמש לוחץ על הלחצן.
• enabled: כשהערך של הפרמטר הזה הוא false, הכפתור מופיע כבלתי זמין ולא פעיל.
• colors: מופע של ButtonColors שקובע את הצבעים שבהם נעשה שימוש בלחצן.
• contentPadding: הריפוד בתוך הלחצן.

כפתור מלא

רכיב הלחצן המלא משתמש ברכיב ה-composable הבסיסי Button. כברירת מחדל, הוא ממולא בצבע אחיד. קטע הקוד הבא מראה איך להטמיע את הרכיב:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

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

כפתור מלא בצבע טונלי

רכיב הלחצן המלא עם גוון משתמש ב-composable‏ FilledTonalButton. כברירת מחדל, הוא ממולא בצבע טונלי.

קטע הקוד הבא מראה איך מטמיעים את הרכיב:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

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

כפתור מודגש

רכיב הלחצן עם הקווים המודגשים משתמש ב-composable‏ OutlinedButton. כברירת מחדל, הוא מופיע עם קו מתאר.

קטע הקוד הבא מראה איך מטמיעים את הרכיב:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

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

לחצן בולט

רכיב הלחצן המוגבה משתמש ברכיב ה-composable‏ ElevatedButton. כברירת מחדל, יש לו צל שמציג את אפקט ההגבהה. חשוב לזכור שמדובר בעצם בלחצן עם מתאר והצללה.

קטע הקוד הבא מראה איך מטמיעים את הרכיב:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

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

לחצן טקסט

רכיב לחצן הטקסט משתמש ב-composable‏ TextButton. עד שלוחצים עליו, הוא מופיע כטקסט בלבד. כברירת מחדל, אין לה מילוי או קו מתאר מוצקים.

קטע הקוד הבא מראה איך מטמיעים את הרכיב:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

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

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

• לחצן פעולה צף
• מסמכי Material UI