לחצן

מילות מפתח: AiAssisted, מוצר:JetpackCompose

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

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

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

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

משטח API

onClick

הפונקציה שהמערכת קוראת לה כשהמשתמש לוחץ על הלחצן.

enabled

אם הערך הוא false, הפרמטר הזה גורם לכך שהלחצן יופיע כלא זמין ולא פעיל.

colors

מופע של ButtonColors שקובע את הצבעים שמשמשים ללחצן.

contentPadding

המרווח הפנימי בתוך הלחצן.

כפתור מלא

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

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

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

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

איור 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. כברירת מחדל, יש לו צל שמייצג את אפקט הגובה. זהו כפתור מלא עם צל.

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

@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 Design 3