ปุ่ม

ปุ่มเป็นคอมโพเนนต์พื้นฐานที่ช่วยให้ผู้ใช้ทริกเกอร์การทำงานที่กำหนดไว้ได้ ปุ่มมี 5 ประเภท ตารางนี้อธิบายลักษณะของปุ่มทั้ง 5 ประเภท รวมถึงตำแหน่งที่คุณควรใช้ปุ่มเหล่านั้น

ประเภท ลักษณะที่ปรากฏ วัตถุประสงค์
เติม พื้นหลังสีเดียวที่มีข้อความคอนทราสต์ ปุ่มที่มีความสำคัญสูง ปุ่มเหล่านี้ใช้สำหรับการกระทำหลักใน แอปพลิเคชัน เช่น "ส่ง" และ "บันทึก" เอฟเฟกต์เงาจะไฮไลต์ความสำคัญของปุ่ม
คุมโทนแบบทึบ สีพื้นหลังจะแตกต่างกันไปตามพื้นผิว รวมถึงการกระทำหลักหรือการกระทำที่สำคัญ ปุ่มสีโทนเติมให้ น้ำหนักภาพมากขึ้นและเหมาะกับฟังก์ชันต่างๆ เช่น "เพิ่มลงในรถเข็น" และ "ลงชื่อเข้าใช้"
สูงกว่าปกติ โดดเด่นด้วยการมีเงา มีวัตถุประสงค์คล้ายกับปุ่มสี เพิ่มระดับความสูงเพื่อให้ ปุ่มดูโดดเด่นยิ่งขึ้น
เติมขอบ มีเส้นขอบที่ไม่มีการเติม ปุ่มที่มีความสำคัญระดับปานกลาง ซึ่งมีการดำเนินการที่สำคัญแต่ไม่ใช่การดำเนินการหลัก ปุ่มเหล่านี้ทำงานร่วมกับปุ่มอื่นๆ ได้ดีเพื่อระบุการดำเนินการสำรอง รอง เช่น "ยกเลิก" หรือ "กลับ"
ข้อความ แสดงข้อความโดยไม่มีพื้นหลังหรือเส้นขอบ ปุ่มที่มีการเน้นต่ำ เหมาะสําหรับการกระทําที่มีความสําคัญน้อยกว่า เช่น ลิงก์การนําทาง หรือฟังก์ชันรอง เช่น "ดูข้อมูลเพิ่มเติม" หรือ "ดู รายละเอียด"

รูปภาพนี้แสดงปุ่ม 5 ประเภทใน Material Design

ตัวอย่างคอมโพเนนต์ปุ่มทั้ง 5 รายการ โดยไฮไลต์ลักษณะเฉพาะของแต่ละปุ่ม
รูปที่ 1 คอมโพเนนต์ปุ่ม 5 ปุ่ม

แพลตฟอร์ม API

onClick
ฟังก์ชันที่ระบบเรียกใช้เมื่อผู้ใช้กดปุ่ม
enabled
เมื่อ false พารามิเตอร์นี้จะทำให้ปุ่มปรากฏเป็นไม่พร้อมใช้งานและ ไม่ได้ใช้งาน
colors
อินสแตนซ์ของ ButtonColors ที่กำหนดสีที่ใช้ใน ปุ่ม
contentPadding
ระยะห่างจากขอบในภายในปุ่ม

ปุ่มแบบเติมสี

คอมโพเนนต์ปุ่มแบบเติมสีใช้ Composable Button พื้นฐาน โดยจะ เติมสีทึบให้โดยค่าเริ่มต้น ข้อมูลโค้ดแสดงวิธีใช้คอมโพเนนต์ 

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

การติดตั้งใช้งานนี้จะปรากฏดังที่แสดง

ปุ่มแบบเติมสีที่มีพื้นหลังสีม่วงซึ่งเขียนว่า "เติมสี"
รูปที่ 2 ปุ่มแบบเติมสี

ปุ่มแบบเติมสีโทน

คอมโพเนนต์ปุ่มแบบเติมสีโทนัลใช้ FilledTonalButton ที่ใช้ร่วมกันได้ โดยค่าเริ่มต้นจะมีการเติมสีโทน

ข้อมูลโค้ดแสดงวิธีติดตั้งใช้งานคอมโพเนนต์

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

การติดตั้งใช้งานนี้จะปรากฏดังที่แสดง

ปุ่มสีเดียวกันที่มีพื้นหลังสีม่วงอ่อนซึ่งระบุว่า "Tonal"
รูปที่ 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 ปุ่มข้อความ

แหล่งข้อมูลเพิ่มเติม