Button

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

ประเภท

รูปลักษณ์

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

เติมพื้น

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

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

โทนสีแบบทึบ

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

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

สูงกว่าปกติ

โดดเด่นด้วยเงา

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

เติมขอบ

มีเส้นขอบที่ไม่มีสี

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

ข้อความ

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

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

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

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

แพลตฟอร์ม API

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

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

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

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

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

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

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

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

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

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

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

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

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