Alternar ícones
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Um ToggleChip é um ícone especializado que permite aos usuários selecionar várias opções.
Os ícones de alternância incluem um controle de alternância de dois estados. Alguns exemplos de controle de alternância de dois estados incluem uma chave, um botão de opção ou uma caixa de seleção. Use os ícones de alternância para situações em que muitas opções precisam ser definidas de forma rápida e fácil, como nas Configurações.
Anatomia
Os ícones de alternância têm quatro slots que acomodam dois rótulos de texto, um controle de seleção e um ícone do aplicativo. O ícone e o rótulo secundário são opcionais.
A. Marcador
B. Rótulo secundário
C. Ícone
D. Controle de seleção
E. Contêiner
Alternar gradiente de ícones
Superior/Esquerda = 0% Superfície
Inferior/Direita = 50% Primário
(sobreposições de gradiente em um plano de fundo de cor da superfície)
Controle de seleção
Switch
Use um interruptor para ativar ou desativar uma seleção.
Botão de opção
Use botões de opção nas listas em que o usuário pode selecionar apenas uma opção.
Checkbox
Use caixas de seleção nas listas em que o usuário pode selecionar várias opções.
Ícones de alternância de divisão
Use os ícones de alternância de divisão quando quiser duas áreas tocáveis.
Split SwitchChips (link em inglês)
O SplitToggleChip difere do SwitchChip por ter duas áreas tocáveis, uma clicável e outra com um botão de alternância.
Nos ícones de alternância de divisão, diferencie a área tocável em segundo plano e o controle de alternância, definindo cada seção de uma cor diferente.
Uso
Use SwitchChips conforme mostrado nos exemplos abaixo.
Layouts adaptáveis
Comportamento responsivo
Os SwitchChips se esticam para preencher a largura disponível em telas maiores.
Ícone (24 x 24 dp)
Contêiner (52 x XX dp)
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-07-27 UTC."],[],[],null,["# Toggle chips\n\nA [ToggleChip](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleChip(kotlin.Boolean,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.wear.compose.material.ToggleChipColors,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,kotlin.Function0)) is a specialized chip that allows users to select various options. \nToggle chips include a bi-state toggle control. Some examples of a bi-state toggle control include a switch, radio button, or checkbox. Use toggle chips for situations in which many options may need to be quickly and easily set, such as in Settings.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\nToggle chips have four slots that accommodate two text labels, one selection control and one application icon. The icon and secondary label are optional.\n\n**A. Label\nB. Secondary label\nC. Icon\nD. Selection control\nE. Container**\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nToggle Chips Gradient\n---------------------\n\nTop/Left = 0% Surface \n\nBottom/Right = 50% Primary \n\n(Gradient overlays on a background of Surface color)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSelection control\n-----------------\n\n**Switch**\n\nUse a switch to turn a selection on or off.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Radio button**\n\nUse radio buttons in lists where the user can select only one option.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Checkbox**\n\nUse checkboxes in lists where the user can select multiple options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Split toggle chips**\n\nUse split toggle chips when you want two tappable areas.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRelated components\n------------------\n\n**Split ToggleChips**\n\nThe SplitToggleChip differs from the ToggleChip by having two tappable areas, one clickable and one with the toggle. \n\n\nOn split toggle chips, differentiate between the tappable background area and the toggle control by making each section a different color.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse ToggleChips as shown in the following examples.\n\nAdaptive layouts\n----------------\n\n**Responsive behavior**\n\nToggleChips 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"]]
