Chip
Los Chips son elementos compactos que representan una entrada, atributo o acción.
Los Chips le permiten a los usuarios introducir información, hacer selecciones, filtrar contenido, o activar acciones.
Aunque incluido como un componente individual, el uso más común será en algún tipo de entrada de formulario, por lo que parte del comportamiento demostrado aquí no se muestra en este contexto.
Basic chip
Ejemplos de Chips, usando un Avatar de imagen, Avatar de icono SVG, Avatar con "Letra" y (cadena de texto).
Array de Chips
Los chips con contorno ofrecen un estilo alternativo.
- Los Chips con la propiedad
onClickdefinida cambian su apariencia en el focus, el hover y el click. - Los Chips con la propiedad
onDeletedefinida mostrarán un icono de eliminar, el cuál cambia de apariencia en el hover.
Chips con contorno
<Chip label="Deleteable" onDelete={handleDelete} />
<Chip label="Deleteable" variant="outlined" onDelete={handleDelete} /><Chip
label="Clickable Deleteable"
onClick={handleClick}
onDelete={handleDelete}
/>
<Chip
label="Clickable Deleteable"
variant="outlined"
onClick={handleClick}
onDelete={handleDelete}
/>
<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" />Array de Chips
Un ejemplo de cómo renderizar múltiples Chips desde un array de valores. Eliminar un chip lo quita del array. Tened en cuenta que al no estar la propiedad onClick definida, al Chip se le puede hacer focus, pero no gana profundidad si se hace click en él o se toca.
- Angular
- jQuery
- Polymer
- React
- Vue.js
<Chip />Accesibilidad
If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (keyup event) Backspace or Delete will call the onDelete handler while releasing Escape will blur the Chip.