Chip
Chips são elementos compactos que representam uma entrada, atributo ou ação.
Chips permitirão que usuários insiram informações, façam seleções, filtrem conteúdo ou acionem gatilhos.
Embora incluído aqui como um componente independente, o uso mais comum será em alguma forma de entrada, portanto, alguns dos comportamentos demonstrados aqui não são mostrados considerando um contexto.
<Chip label="Chip Filled" />
<Chip label="Chip Outlined" variant="outlined" />Ações do Chip
Você pode usar as seguintes ações.
- Chips com a propriedade
onClickdefinida, mudará a aparência com foco, ao passar por cima e com clique. - Chips com a propriedade
onDeletedefinida irá exibir um ícone de remoção, no qual modificará a aparência ao passar por cima.
Clicável
<Chip
label="Custom delete icon"
onClick={handleClick}
onDelete={handleDelete}
deleteIcon={<DoneIcon />}
/>
<Chip
label="Custom delete icon"
onClick={handleClick}
onDelete={handleDelete}
deleteIcon={<DeleteIcon />}
variant="outlined"
/>Chip adornments
You can add ornaments to the beginning of the component.
Use the avatar prop to added a avatar or use the icon prop to added a icon.
Avatar chip
<Chip avatar={<Avatar>M</Avatar>} label="Avatar" />
<Chip
avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
label="Avatar"
variant="outlined"
/><Chip icon={<FaceIcon />} label="With Icon" />
<Chip icon={<FaceIcon />} label="With Icon" variant="outlined" /><Stack direction="row" spacing={1}>
<Chip label="primary" color="primary" />
<Chip label="success" color="success" />
</Stack>
<Stack direction="row" spacing={1}>
<Chip label="primary" color="primary" variant="outlined" />
<Chip label="success" color="success" variant="outlined" />
</Stack><Chip label="Small" size="small" />
<Chip label="Small" size="small" variant="outlined" />Matriz de Chip (Array)
An example of rendering multiple chips from an array of values. Deletando um chip irá remove-lo da matriz. Note that since no onClick prop is defined, the Chip can be focused, but does not gain depth while clicked or touched.
- Angular
- jQuery
- Polymer
- React
- Vue.js
<Chip />Acessibilidade
Se o Chip é deletável ou clicável, então é como um botão na ordem da tabulação. Quando o Chip está focado (ex. quando tabulando) pressionando (evento keyup) Backspace ou Delete irá chamar o evento manipulador onDelete, enquanto liberando com a tecla Escape irá tirar o foco do Chip.