Button

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

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

משטח API

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

כפתור מלא

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

@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

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

כפתור מודגש

רכיב הלחצן עם הקו המתאר משתמש בפונקציה הניתנת להרכבה OutlinedButton. הוא מופיע עם קו מתאר כברירת מחדל.

בדוגמה הבאה אפשר לראות איך מטמיעים את הרכיב:

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

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

לחצן בולט

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

בדוגמה הבאה אפשר לראות איך מטמיעים את הרכיב:

@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