<!DOCTYPE html><html><head><title>Default Chip</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-chipselectableremovable>
Chip
</igc-chip></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Web Components y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
cmd
Luego necesitarás importar IgcChipComponent, su CSS necesario y registrar su módulo, así:
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.
La forma más sencilla de empezar a utilizarlo IgcChipComponent es la siguiente:
<igc-chip></igc-chip>html
Para mostrar un chip seleccionable, puede utilizar la propiedad selectable del chip.
<igc-chipselectable></igc-chip>html
Para mostrar un chip extraíble, puede utilizar la propiedad removable del chip.
<igc-chipremovable></igc-chip>html
Ejemplos
Variantes
El chip Ignite UI for Web Components admite varias variantes estilísticas predefinidas. Puede cambiar la variante asignando uno de los valores admitidos: Primary, Info, Success, Warning o Danger a la propiedad variant.
<!DOCTYPE html><html><head><title>Default Chip</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"style="flex-direction: row; gap: 8px;"><igc-chipvariant="primary"selectableremovable>
Primary
</igc-chip><igc-chipvariant="info"selectableremovable>
Info
</igc-chip><igc-chipvariant="success"selectableremovable>
Success
</igc-chip><igc-chipvariant="warning"selectableremovable>
Warning
</igc-chip><igc-chipvariant="danger"selectableremovable>
Danger
</igc-chip></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Desactivado
El chip Ignite UI for Web Components se puede desactivar utilizando la propiedad disabled.
<igc-chipdisabled></igc-chip>html
Prefijo sufijo
Con las partes Prefix y Suffix del componente IgcChipComponent y sus ranuras, podemos agregar contenido diferente antes y después del contenido principal del chip. Proporcionamos íconos predeterminados para seleccionar y eliminar, pero puede personalizarlos usando las ranuras IgcSelectComponent y Remove. Puede agregar contenido adicional antes o después del contenido principal, utilizando las ranuras Start y End.
<!DOCTYPE html><html><head><title>Default Chip</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"style="flex-direction: row; gap: 8px"><igc-chipselectableremovable><spanslot="select"><igc-iconname="custom-select"></igc-icon></span>
Custom Icons
<spanslot="remove"><igc-iconname="custom-remove"></igc-icon></span></igc-chip><igc-chipremovable><spanslot="start"><igc-iconname="brush"></igc-icon></span>
Start Slot
</igc-chip><igc-chipselectable>
End Slot
<spanslot="end"><igc-iconname="brick-wall"></igc-icon></span></igc-chip><igc-chipdisabled>
Disabled Chip
<spanslot="end"><igc-iconname="dog-icon"></igc-icon></span></igc-chip></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Tamaño
Permitimos que el usuario elija el tamaño del IgcChipComponent utilizando la variable CSS--ig-size:
<!DOCTYPE html><html><head><title>Default Chip</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"style="flex-direction: row; gap: 8px; align-items: baseline;"><igc-chipclass="small"selectableremovable>
Chip
</igc-chip><igc-chipclass="medium"selectableremovable>
Chip
</igc-chip><igc-chipclass="large"selectableremovable>
Chip
</igc-chip></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
<!DOCTYPE html><html><head><title>Styled Chip</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"style="flex-direction: row; gap: 8px;"><igc-chipselectableremovable>
Chip
</igc-chip></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html