Button

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

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

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

איור 1. חמשת רכיבי הלחצנים.

ממשק API

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

לחצן מלא

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

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

הערה: אם רוצים ליצור לחצן בהתאמה אישית, משתמשים ב-composable‏ Button.

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

איור 2. לחצן מלא.

לחצן מלא בצבע טונלי

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

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

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

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

איור 3. לחצן טונלי.

לחצן מודגש

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

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

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

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

איור 4. לחצן מודגש.

לחצן בולט

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

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

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

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

איור 5. לחצן בולט.

לחצן טקסט

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

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

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

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

איור 6. לחצן טקסט.

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

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