Button

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

ประเภท

รูปลักษณ์

วัตถุประสงค์

เติม

พื้นหลังสีเดียวที่มีข้อความตัดกัน

ปุ่มที่มีความสำคัญสูง ปุ่มเหล่านี้ใช้สำหรับการกระทำหลักในแอปพลิเคชัน เช่น "ส่ง" และ "บันทึก" เอฟเฟกต์เงาเน้นความสำคัญของปุ่ม

โทนสีแบบทึบ

สีพื้นหลังจะแตกต่างกันไปตามพื้นผิว

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

สูงกว่าปกติ

โดดเด่นด้วยการมีเงา

มีบทบาทคล้ายกับปุ่มสี เพิ่มระดับความสูงเพื่อให้ปุ่มปรากฏเด่นชัดยิ่งขึ้น

เติมขอบ

มีเส้นขอบที่ไม่มีการเติม

ปุ่มที่มีความสำคัญระดับปานกลาง ซึ่งมีการดำเนินการที่สำคัญแต่ไม่ใช่การดำเนินการหลัก มักจับคู่กับปุ่มอื่นๆ เพื่อระบุว่ามีการดำเนินการสำรองอย่างอื่น เช่น "ยกเลิก" หรือ "กลับ"

ข้อความ

แสดงข้อความโดยไม่มีพื้นหลังหรือเส้นขอบ

ปุ่มที่มีการเน้นต่ำ เหมาะสำหรับการดำเนินการที่ไม่สำคัญมาก เช่น ลิงก์การนำทาง หรือฟังก์ชันรอง เช่น "ดูข้อมูลเพิ่มเติม" หรือ "ดูรายละเอียด"

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

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

พื้นผิว API

  • onClick: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้กดปุ่ม
  • enabled: เมื่อเป็นเท็จ พารามิเตอร์นี้จะทำให้ปุ่มปรากฏเป็น ไม่พร้อมใช้งานและไม่ได้ใช้งาน
  • 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

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

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

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