Чипсы
Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Компонент Chip — это интерактивный элемент, который представляет ввод, атрибут или действие.
Рекомендации по линиям
Минимум
Основной текст > 1 строк
Вторичная этикетка > 1 строк
Максимум
Основной текст > 2 строки
Вторичная этикетка > 3 строки
Анатомия
Чипы могут содержать до двух текстовых меток и дополнительный значок. Должна быть предоставлена хотя бы одна текстовая метка или значок. Чипы могут обрезать текст, если текстовая метка слишком длинная. Основная метка представляет собой одну строку текста, если присутствует вторичная метка. Основная метка может содержать две строки текста, если вторичная метка отсутствует.
Если метка только одна, ее следует расположить по центру. Если присутствует дополнительная метка или значок, метки должны быть выровнены по левому краю.
А. Основная этикетка
Б. Вторичная этикетка (необязательно)
C. Значок (необязательно)
Д. Контейнер
Чипсы Градиент
Стандартный чип
Вверху/слева = 50 % основного
Внизу/Справа = 0% поверхности
(Наложение градиента на фон цвета поверхности)
Изображение чипа
Вверху/слева = 30% основного
0, 0, 45° (ниже низа/справа) = 20 % на поверхностном варианте
Альтернативные типы чипов
Чип с фоновым изображением
Чипы изображений содержат действия, относящиеся к выбранному изображению. Чипы изображений хорошо работают, чтобы передать более конкретный внешний вид.
Рекомендуется, чтобы эти чипы имели фиксированную высоту 52 dp.
Чип Аватара
Используйте чипы аватара для действий, связанных с выбранным аватаром. Чипы аватара также могут содержать значки, которые делают аватар более легко узнаваемым, например, фотографию в идентификаторе контакта. Иконки аватаров имеют размер 32x32 dp.
Компактный чип
Связанный компонент CompactChip — это вариант компонента Chip, который выглядит меньше и предназначен для случаев использования, когда места меньше.
Компактные чипы имеют слот для значка и слот для однострочной текстовой метки. Компактные чипы имеют зону касания высотой 48 dp.
Иерархия
Используйте заливки разного цвета для обозначения иерархии чипов. Спроектируйте каждый экран так, чтобы на нем была одна заметная фишка для основного действия.
Высокий акцент
Используйте выделенные элементы для действий, которые являются основными для страницы. Используйте основные цвета в качестве заливки акцентного чипа.
Средний акцент
Используйте фишки средней важности для действий, которые менее важны, чем основные действия. Используйте второстепенные цвета для заливки микросхемы со средним акцентом.
Альтернативно можно использовать собственный компонент OutlinedChip. Обведенный чип имеет прозрачный фон, основной вариант цветной обводки с непрозрачностью 60 % и содержимое основного цвета.
Низкий акцент
Фишки с низким акцентом имеют прозрачную заливку и только текстовую метку. Используйте фишки с низким акцентом, чтобы указать дочернее отношение к первичной или вторичной фишке.
Размеры
Чип по умолчанию
Значок: 24 дп.
Высота: 52 дп
Компактный чип
Значок: 20 дп.
Высота: 32 дп
Область касания: 48 dp
Применение
См. примеры использования чипов, например стандартные чипы в настройках и чипы изображений в приложении для тренировок.
Адаптивные макеты
Отзывчивое поведение
Чипы растягиваются, чтобы заполнить доступную ширину на больших дисплеях.
Значок (24 x 24 пикселя)
Контейнер (52 x XX dp)
Контент и образцы кода на этой странице предоставлены по лицензиям. Java и OpenJDK – это зарегистрированные товарные знаки корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2025-07-29 UTC.
[[["Прост для понимания","easyToUnderstand","thumb-up"],["Помог мне решить мою проблему","solvedMyProblem","thumb-up"],["Другое","otherUp","thumb-up"]],[["Отсутствует нужная мне информация","missingTheInformationINeed","thumb-down"],["Слишком сложен/слишком много шагов","tooComplicatedTooManySteps","thumb-down"],["Устарел","outOfDate","thumb-down"],["Проблема с переводом текста","translationIssue","thumb-down"],["Проблемы образцов/кода","samplesCodeIssue","thumb-down"],["Другое","otherDown","thumb-down"]],["Последнее обновление: 2025-07-29 UTC."],[],[],null,["# Chips\n\nThe [Chip](/reference/kotlin/androidx/wear/compose/material/package-summary#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)) component is an interactive element that represents an input, attribute, or action.\n\nLine Recommendations\n--------------------\n\n**Minimum**\n\nPrimary Text \\\u003e 1 Lines \n\nSecondary Label \\\u003e 1 Lines \n\n**Maximum**\n\nPrimary Text \\\u003e 2 Lines \n\nSecondary Label \\\u003e 3 Lines\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\nChips can contain up to two text labels and an optional icon. At least one text label or an icon must be provided. Chips may truncate text if the text label is too long. The primary label is one line of text if the secondary label is present. The primary label can contain two lines of text if the secondary label is not present. \n\nIf there's only one label, it should be centered. If a secondary label or icon is present, the labels should be left-aligned. \n\n**A. Primary label\nB. Secondary label (optional)\nC. Icon (optional)\nD. Container**\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Chips Gradient**\n------------------\n\n**Standard Chip**\n\nTop/Left = 50% Primary \n\nBottom/Right = 0% Surface \n\n(Gradient overlays on a background of Surface color)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Chip**\n\nTop/Left = 30% Primary \n\n0, 0, 45° (Below Bottom/Right) = 20% On Surface Variant\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAlternative Chip types\n----------------------\n\n**Chip with background image**\n\nImage chips contain actions which relate to a chosen image. Image chips work well to communicate a more specific look and feel.\n\nIt is recommended that these Chips should have a fixed height of 52 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Avatar Chip**\n\nUse avatar chips for actions that are related to a chosen avatar. Avatar chips can also have icons used to make the avatar more easily recognizable, such as a contact ID photo. Avatar icons are 32x32 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRelated components\n------------------\n\n**Compact Chip**\n\nThe related component, CompactChip is a variant of the Chip component that appears smaller and is designed for use cases where there is less space. \n\n\nCompact chips have a slot for an icon and a slot for a single line text label. Compact chips have a tappable area with a height of 48 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\nUse different color fills to denote chip hierarchy. Design each screen to contain a single prominent chip for the primary action. \n\n**High emphasis** \n\n\nUse high-emphasis chips for actions that are primary to the page. Use primary colors as the fill of a high emphasis chip. \n\n**Medium emphasis** \n\n\nUse medium emphasis chips for actions that are less important than the primary actions. Use secondary colors for the fill of a medium emphasis chip. \n\n\nAlternatively, use the custom OutlinedChip component. The outlined chip has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content. \n\n**Low emphasis** \n\n\nLow emphasis chips have a transparent fill and only a text label. Use low emphasis chips to indicate a child relationship to a primary or secondary chip.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Sizes**\n\n**Default Chip**\n\nIcon: 24 dp \nHeight: 52 dp \n**Compact Chip**\n\nIcon: 20 dp \nHeight: 32 dp \nTappable Area: 48 dp\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Usage**\n\nSee examples of chip usage such as standard chips in Settings and image chips in an exercise app.\n\n### **Adaptive layouts**\n\n**Responsive behavior**\n\nChips stretch to fill the available width on larger displays. \n\n\nIcon (24 x 24 dp) \n\nContainer (52 x XX dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
