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