ชิป

คอมโพเนนต์ Chip เป็นองค์ประกอบ UI ขนาดกะทัดรัดและโต้ตอบได้ ซึ่งแสดงเอนทิตีที่ซับซ้อน เช่น ผู้ติดต่อหรือแท็ก โดยมักจะมีไอคอนและป้ายกำกับ และอาจเลือกได้ ปิดได้ หรือคลิกได้

ชิปมี 4 ประเภทและตัวอย่างการใช้งานมีดังนี้

  • ชิปความช่วยเหลือ: แนะนำผู้ใช้ระหว่างทำงาน มักจะปรากฏเป็นองค์ประกอบ UI ชั่วคราวเพื่อตอบสนองต่อข้อมูลจากผู้ใช้
  • ชิปตัวกรอง: ช่วยให้ผู้ใช้ปรับแต่งเนื้อหาจากชุดตัวเลือกได้ โดยสามารถเลือกหรือยกเลิกการเลือกได้ และอาจมีไอคอนเครื่องหมายถูกเมื่อเลือก
  • ชิปอินพุต: แสดงข้อมูลที่ผู้ใช้ระบุ เช่น ตัวเลือกใน เมนู โดยอาจมีไอคอนและข้อความ รวมถึงมี X สำหรับนำออก
  • ชิปคำแนะนำ: แสดงคำแนะนำแก่ผู้ใช้โดยอิงตามกิจกรรมล่าสุดหรืออินพุตของผู้ใช้ โดยปกติจะปรากฏใต้ช่องป้อนข้อมูลเพื่อกระตุ้นให้ผู้ใช้ดำเนินการ
ตัวอย่างของคอมโพเนนต์ชิปทั้ง 4 รายการ โดยไฮไลต์ลักษณะเฉพาะของแต่ละรายการ
รูปที่ 1 คอมโพเนนต์ชิปทั้ง 4 ประเภท

แพลตฟอร์ม API

มีฟังก์ชันที่ประกอบกันได้ 4 ฟังก์ชันที่สอดคล้องกับชิปทั้ง 4 ประเภท ส่วนต่อไปนี้จะอธิบายฟังก์ชันที่ประกอบกันได้เหล่านี้และรายละเอียดความแตกต่าง อย่างไรก็ตาม ฟังก์ชันเหล่านี้มีพารามิเตอร์ต่อไปนี้ร่วมกัน

  • label: สตริงที่ปรากฏบนชิป
  • icon: ไอคอนที่แสดงที่จุดเริ่มต้นของชิป ฟังก์ชันที่ประกอบกันได้บางฟังก์ชันมีพารามิเตอร์ leadingIcon และ trailingIcon แยกกัน
  • onClick: แลมบ์ดาที่ชิปเรียกเมื่อผู้ใช้กดชิป

ชิปความช่วยเหลือ

ฟังก์ชันที่ประกอบกันได้ AssistChip เป็นวิธีที่ตรงไปตรงมาในการสร้าง ชิปความช่วยเหลือที่กระตุ้นให้ผู้ใช้ดำเนินการในทิศทางที่เฉพาะเจาะจง ฟีเจอร์ที่โดดเด่นอย่างหนึ่งคือพารามิเตอร์ leadingIcon ซึ่งช่วยให้คุณแสดงไอคอนทางด้านซ้ายของชิปได้ ตัวอย่างต่อไปนี้แสดงวิธีใช้งาน

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}
Chip.kt

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

ชิปความช่วยเหลือแบบง่ายที่แสดงไอคอนนำและป้ายกำกับข้อความ
รูปที่ 2 ชิปความช่วยเหลือ

ชิปตัวกรอง

ฟังก์ชันที่ประกอบกันได้ FilterChip กำหนดให้คุณต้องติดตามว่าชิป มีการเลือกอยู่หรือไม่ ตัวอย่างต่อไปนี้แสดงวิธีแสดงไอคอนที่เลือกไว้ด้านหน้าเฉพาะเมื่อผู้ใช้เลือกชิป

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}
Chip.kt

การใช้งานนี้จะปรากฏดังนี้เมื่อไม่ได้เลือก

ชิปตัวกรองที่ไม่ได้เลือก ไม่มีเครื่องหมายถูก และมีพื้นหลังธรรมดา
รูปที่ 3 ชิปตัวกรองที่ไม่ได้เลือก

และจะปรากฏดังนี้เมื่อเลือก

ชิปตัวกรองที่เลือกพร้อมเครื่องหมายถูกและพื้นหลังสี
รูปที่ 4 ชิปตัวกรองที่เลือก

ชิปอินพุต

คุณสามารถใช้ฟังก์ชันที่ประกอบกันได้ InputChip เพื่อสร้างชิปที่เกิดจาก การโต้ตอบของผู้ใช้ เช่น ในโปรแกรมรับส่งอีเมล เมื่อผู้ใช้เขียนอีเมล ชิปอินพุตอาจแสดงผู้ติดต่อที่ผู้ใช้เพิ่มลงในช่อง "ถึง:"

การใช้งานต่อไปนี้แสดงชิปอินพุตที่อยู่ในสถานะเลือกอยู่แล้ว ผู้ใช้จะปิดชิปเมื่อกดชิป

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}
Chip.kt

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

ชิปอินพุตที่มีรูปโปรไฟล์และไอคอนต่อท้าย
รูปที่ 5 ชิปอินพุต

ชิปคำแนะนำ

ฟังก์ชันที่ประกอบกันได้ SuggestionChip เป็นฟังก์ชันที่ประกอบกันได้พื้นฐานที่สุดในรายการในหน้านี้ ทั้งในด้านคำจำกัดความของ API และกรณีการใช้งานทั่วไป ชิปคำแนะนำจะแสดงคำแนะนำที่สร้างขึ้นแบบไดนามิก เช่น ในแอปแชท AI คุณอาจใช้ชิปคำแนะนำเพื่อแสดงคำตอบที่เป็นไปได้สำหรับข้อความล่าสุด

ลองดูการใช้งาน SuggestionChip ต่อไปนี้

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

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

ชิปคำแนะนำแบบง่าย
รูปที่ 6 ชิปคำแนะนำ

ชิปแบบยกขึ้น

ตัวอย่างทั้งหมดในเอกสารนี้ใช้ฟังก์ชันที่ประกอบกันได้พื้นฐานซึ่งมีลักษณะแบน หากต้องการชิปที่มีลักษณะแบบยกขึ้น ให้ใช้ฟังก์ชันที่ประกอบกันได้ 1 ใน 3 รายการต่อไปนี้

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