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")
    }
}

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

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

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

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

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

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

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

ปุ่มโทนสีที่มีพื้นหลังสีม่วงอ่อนที่เขียนว่า "เต็มไปด้วย"
รูปที่ 3 ปุ่มโทนสี

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

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

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

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

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

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

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

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

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

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

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

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

ปุ่มข้อความ

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

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

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

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

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

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