Button
ปุ่มเป็นคอมโพเนนต์พื้นฐานที่ช่วยให้ผู้ใช้ทริกเกอร์ การดำเนินการ ปุ่มมี 5 ประเภท ตารางต่อไปนี้อธิบาย ลักษณะต่างๆ ของปุ่มทั้ง 5 ประเภท รวมถึงตำแหน่งที่คุณควรใช้ ให้พวกเขา
ประเภท |
รูปลักษณ์ |
วัตถุประสงค์ |
---|---|---|
เติมพื้น |
พื้นหลังสีทึบพร้อมข้อความตัดกัน |
ปุ่มที่เน้นความสำคัญ การกระทำเหล่านี้มีไว้สำหรับการดำเนินการหลักในแอปพลิเคชัน เช่น "ส่ง" และ "บันทึก" เอฟเฟกต์เงาจะเน้นย้ำความสำคัญของปุ่ม |
โทนสีที่เติม |
สีพื้นหลังจะแตกต่างกันไปตามพื้นผิว |
รวมทั้งสำหรับการดำเนินการหลักหรือที่สำคัญ ปุ่มแบบเติมสีช่วยให้เห็นฟังก์ชันที่ชัดเจนและเหมาะกับการทำงานมากขึ้น เช่น "เพิ่มในรถเข็น" และ "ลงชื่อเข้าใช้" |
สูงกว่าปกติ |
โดดเด่นเพราะมีเงา |
มีบทบาทที่คล้ายกับปุ่มโทน เพิ่มระดับความสูงเพื่อทำให้ปุ่มปรากฏโดดเด่นยิ่งขึ้น |
เติมขอบ |
มีเส้นขอบที่ไม่มีสีเติม |
ปุ่มที่เน้นปานกลาง ซึ่งมีการดำเนินการที่สำคัญแต่ไม่ใช่หลัก โดยจะจับคู่กับปุ่มอื่นๆ ได้ดี เพื่อระบุการกระทำรองทางเลือก เช่น "ยกเลิก" หรือ "กลับ" |
ข้อความ |
แสดงข้อความที่ไม่มีพื้นหลังหรือเส้นขอบ |
ปุ่มที่ไม่ซับซ้อน เหมาะสำหรับการดำเนินการที่ไม่สำคัญมาก เช่น ลิงก์การนำทาง หรือฟังก์ชันรองอย่าง "ดูข้อมูลเพิ่มเติม" หรือ "ดูรายละเอียด" |
ภาพต่อไปนี้แสดงปุ่ม 5 ประเภทในดีไซน์ Material
แพลตฟอร์ม API
onClick
: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้กดปุ่มenabled
: เมื่อเป็นเท็จ พารามิเตอร์นี้จะทำให้ปุ่มปรากฏขึ้น ไม่พร้อมใช้งานและไม่ได้ใช้งานcolors
: อินสแตนซ์ของButtonColors
ที่กำหนดสีที่ใช้ใน ปุ่มcontentPadding
: ระยะห่างจากขอบของปุ่ม
ปุ่มแบบเติมสี
คอมโพเนนต์ปุ่มเติมสีใช้ Button
Composable พื้นฐาน ใช่เลย
ด้วยสีทึบโดยค่าเริ่มต้น ข้อมูลโค้ดต่อไปนี้จะแสดงวิธีการ
ใช้คอมโพเนนต์ดังนี้
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
การติดตั้งใช้งานนี้จะปรากฏดังนี้
ปุ่มโทนสีทึบ
คอมโพเนนต์ปุ่มโทนสีทึบใช้ Composable FilledTonalButton
โดยจะเติมด้วยโทนสีโดยค่าเริ่มต้น
ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้งานคอมโพเนนต์
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
การติดตั้งใช้งานนี้จะปรากฏดังนี้
ปุ่มแบบเติมขอบ
คอมโพเนนต์ปุ่มที่มีเส้นขอบใช้ OutlinedButton
Composable ทั้งนี้
จะปรากฏขึ้นโดยมีเค้าโครงโดยค่าเริ่มต้น
ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้งานคอมโพเนนต์
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
การติดตั้งใช้งานนี้จะปรากฏดังนี้
ปุ่มแบบยกขึ้น
คอมโพเนนต์ปุ่มนูนใช้ ElevatedButton
Composable มี
เงาที่แสดงเอฟเฟ็กต์ระดับความสูงโดยค่าเริ่มต้น โปรดทราบว่า
โดยพื้นฐานแล้วปุ่มที่มีเส้นขอบที่มีเงา
ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้งานคอมโพเนนต์
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
การติดตั้งใช้งานนี้จะปรากฏดังนี้
ปุ่มข้อความ
คอมโพเนนต์ปุ่มข้อความใช้ Composable TextButton
จนกว่าจะกด
ข้อความจะปรากฏเป็นเพียงข้อความเท่านั้น รูปภาพไม่มีสีเติมหรือเติมสีทึบโดยค่าเริ่มต้น
ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้งานคอมโพเนนต์
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
การติดตั้งใช้งานนี้จะปรากฏดังนี้