ปุ่ม

ปุ่มเป็นคอมโพเนนต์พื้นฐานที่ช่วยให้ผู้ใช้ทริกเกอร์การทำงานที่กำหนดไว้ได้ ปุ่มมี 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")
    }
}

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

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

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

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

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

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

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

ปุ่มสีเดียวกันที่มีพื้นหลังสีม่วงอ่อนซึ่งมีข้อความว่า "สีเดียวกัน"
รูปที่ 3 ปุ่มสี

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

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

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

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

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

ปุ่มแบบเติมขอบโปร่งใสที่มีเส้นขอบสีเข้มซึ่งเขียนว่า "เติมขอบ"
รูปที่ 4 ปุ่มแบบเติมขอบ

ปุ่มแบบยกขึ้น

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

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

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

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

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

ปุ่มข้อความ

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

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

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

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

ปุ่มข้อความที่ระบุว่า "ปุ่มข้อความ"
รูปที่ 6 ปุ่มข้อความ

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