Чип

Компонент Chip представляет собой компактный интерактивный элемент интерфейса. Она представляет собой сложный объект, например контакт или тег, часто со значком и ярлыком. Его можно отметить, закрыть или нажать на него.

Ниже перечислены четыре типа чипов и описано, в каких случаях их можно использовать.

• Помощь – помогает пользователю при выполнении задачи. Часто появляется как временный элемент интерфейса в ответ на ввод данных пользователем.
• Фильтр. Позволяет пользователям отбирать контент по заданным параметрам. Их можно выбирать и отменять выбор. Если элемент выбран, рядом с ним может быть значок флажка.
• Входные данные. Информация, предоставленная пользователем, например выбранный пункт меню. Они могут содержать значок и текст, а также кнопку X для удаления.
• Подсказка. Рекомендации для пользователя на основе его недавних действий или введенных данных. Обычно появляются под полем ввода, чтобы побудить пользователя к действию.

Поверхность API

Существует четыре функции, которые соответствуют четырем типам чипов. Ниже подробно описаны эти функции и их различия. Однако у них есть общие параметры:

• label – строка, которая появляется на чипе.
• icon – значок, который показывается в начале чипа. У некоторых компонентов есть отдельные параметры leadingIcon и trailingIcon.
• onClick – функция Lambda, которую вызывает чип, когда пользователь нажимает на него.

Чип помощника

Composable-функция 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

Если этот вариант не выбран, он будет выглядеть так:

При выборе он выглядит так:

Чип ввода

Компонуемый элемент 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, так и по распространенным вариантам использования. Чипы с подсказками содержат динамически сгенерированные подсказки. Например, в приложении для чата с ИИ можно использовать чипы с подсказками, чтобы предлагать варианты ответов на последнее сообщение.

Рассмотрим следующий пример реализации SuggestionChip:

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

Вот как это будет выглядеть:

Чип "Выше нормы"

Во всех примерах в этом документе используются базовые функции, которые создают плоский интерфейс. Если вы хотите, чтобы чип выглядел более объемным, используйте один из трех следующих компонентов:

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

Дополнительные ресурсы

• Документация по Material UI