ปุ่ม

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

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

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

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

แพลตฟอร์ม API

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

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

คอมโพเนนต์ปุ่มแบบเติมสีใช้คอมโพสได้พื้นฐาน 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 ปุ่มสีโทน

ปุ่มแบบเติมขอบ

คอมโพเนนต์ปุ่มแบบเติมขอบใช้ 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 ปุ่มข้อความ

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