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