このページは Cloud Translation API によって翻訳されました。

チップ

Chip コンポーネントは、コンパクトでインタラクティブな UI 要素です。複雑なコンセプトをエンティティ（通常はアイコンやラベル付き）です。かもしれないオン、閉じる、クリック可能にできます。

チップには、次の 4 種類があり、使用する場所は次のとおりです。

アシスト: 作業中にユーザーをガイドします。一時的な UI として表示されることが多い要素を返します。
フィルタ: 一連のオプションからコンテンツを絞り込むことができます。ユーザーは、選択または選択解除できます。選択するとチェックマークのアイコンが表示されることもあります。
入力: ユーザーが提供する情報を表します（選択します。アイコンとテキストを含めることができ、「X」削除されます。
Suggestion: 最近のユーザーに対するおすすめ度に基づいて入力できます。通常、ユーザーに入力を促すために入力フィールドの下に表示されますできます。

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

この実装は次のようになります。

フィルタラベル

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

この実装は次のようになります。

候補ワード

SuggestionChip コンポーザブルは、リストされているコンポーザブルの中で最も基本的なものです（API 定義と一般的なユースケースの両方）を確認してください。提案動的に生成されたヒントが表示されます。たとえば AI チャットアプリでは、候補ワードを使用して、候補となる最新の質問に表示されます。

次の SuggestionChip の実装について考えてみましょう。

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

これを実装すると次のようになります。

上昇したチップ

このドキュメントのすべての例で、フラットを使用する基本コンポーザブルを使用しています。表示されます。チップを浮き彫りにする場合は、次の 3 つのコンポーザブル:

参考情報

マテリアル UI のドキュメント