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

הערה: כדי ליצור לחצן בהתאמה אישית, אפשר להשתמש בתוכן הקומפוזבילי Button.

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

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

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

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

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

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

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

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

לחצן מודגש

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

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

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

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

איור 4. לחצן עם קו מתאר.

לחצן בולט

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

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

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

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

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

לחצן טקסט

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

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

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

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

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

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

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