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

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

לחצן מודגש

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

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

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

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

לחצן בולט

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

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

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

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

לחצן טקסט

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

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

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

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

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

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