Chip
コンポーネントは、コンパクトでインタラクティブな UI 要素です。複雑なコンセプトを
エンティティ(通常はアイコンやラベル付き)です。かもしれない
オン、閉じる、クリック可能にできます。
チップには、次の 4 種類があり、使用する場所は次のとおりです。
- アシスト: 作業中にユーザーをガイドします。一時的な UI として表示されることが多い 要素を返します。
- フィルタ: 一連のオプションからコンテンツを絞り込むことができます。ユーザーは、 選択または選択解除できます。選択するとチェックマークのアイコンが表示されることもあります。
- 入力: ユーザーが提供する情報を表します( 選択します。アイコンとテキストを含めることができ、「X」削除されます。
- Suggestion: 最近のユーザーに対するおすすめ度に基づいて 入力できます。通常、ユーザーに入力を促すために入力フィールドの下に表示されます できます。
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) ) } ) }
この実装は次のようになります。
<ph type="x-smartling-placeholder">![シンプルなアシストチップ。](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-assist.png?authuser=6&hl=ja)
フィルタラベル
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 }, ) }
この実装の選択を解除すると、次のように表示されます。
<ph type="x-smartling-placeholder">![選択されていないフィルタラベル。チェックは表示されず、プランの背景が表示されます。](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter.png?authuser=6&hl=ja)
選択すると、次のように表示されます。
<ph type="x-smartling-placeholder">![選択されたフィルタラベル。チェックとカラーの背景が表示されています。](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter-active.png?authuser=6&hl=ja)
入力チップ
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) ) }, ) }
この実装は次のようになります。
![アバターと末尾のアイコンを含む入力チップ。](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-input.png?authuser=6&hl=ja)
候補ワード
SuggestionChip
コンポーザブルは、リストされているコンポーザブルの中で最も基本的なものです
(API 定義と一般的なユースケースの両方)を確認してください。提案
動的に生成されたヒントが表示されます。たとえば AI チャットアプリでは、
候補ワードを使用して、候補となる最新の質問に
表示されます。
次の SuggestionChip
の実装について考えてみましょう。
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
これを実装すると次のようになります。
![シンプルなアシストチップ。](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-suggestion.png?authuser=6&hl=ja)
上昇したチップ
このドキュメントのすべての例で、フラットを使用する基本コンポーザブルを使用しています。 表示されます。チップを浮き彫りにする場合は、 次の 3 つのコンポーザブル: