ปุ่ม

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

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

แพลตฟอร์ม API

onClick

ฟังก์ชันที่ระบบเรียกใช้เมื่อผู้ใช้กดปุ่ม

enabled

เมื่อ false พารามิเตอร์นี้จะทำให้ปุ่มปรากฏเป็นไม่พร้อมใช้งานและไม่ทำงาน

colors

อินสแตนซ์ของ ButtonColors ที่กำหนดสีที่ใช้ในปุ่ม

contentPadding

ระยะห่างจากขอบภายในปุ่ม

ปุ่มแบบทึบ

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

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

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

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

ข้อมูลโค้ดแสดงวิธีใช้คอมโพเนนต์และแสดงตัวอย่างแบบอินเทอร์แอกทีฟ

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

ปุ่มแบบมีเส้นขอบ

คอมโพเนนต์ปุ่มที่มีเส้นขอบใช้ OutlinedButton Composable โดยจะปรากฏพร้อมกับเส้นขอบโดยค่าเริ่มต้น

ข้อมูลโค้ดแสดงวิธีใช้คอมโพเนนต์และแสดงตัวอย่างแบบอินเทอร์แอกทีฟ

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

ปุ่มแบบยกสูง

คอมโพเนนต์ปุ่มที่ยกขึ้นจะใช้ ElevatedButton Composable โดยจะมีเงาที่แสดงถึงเอฟเฟกต์ระดับความสูงโดยค่าเริ่มต้น เป็นปุ่มแบบเติมสีที่มีเงา

ข้อมูลโค้ดแสดงวิธีใช้คอมโพเนนต์และแสดงตัวอย่างแบบอินเทอร์แอกทีฟ

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

ปุ่มข้อความ

คอมโพเนนต์ปุ่มข้อความใช้ TextButton Composable โดยจะปรากฏเป็นข้อความเท่านั้นจนกว่าจะกด โดยค่าเริ่มต้นจะไม่มีการเติมสีทึบหรือเส้นขอบ

ข้อมูลโค้ดแสดงวิธีใช้คอมโพเนนต์และแสดงตัวอย่างแบบอินเทอร์แอกทีฟ

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

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

• ปุ่มการทำงานแบบลอย
• ภาพรวมปุ่ม Material Design 3