Descripción general del botón de icono Web Components
El componente Botón de icono Ignite UI for Web Components permite a los desarrolladores utilizar iconos registrados como botones en su aplicación. Incluye todas las funciones del componente de icono, pero también agrega funciones del componente de botón.
<!DOCTYPE html><html><head><title>Icon Button Sizing</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="sample"><igc-icon-buttonname="thumb-up"collection="material"variant="contained"class="small"></igc-icon-button><igc-icon-buttonname="thumb-up"collection="material"variant="contained"class="medium"></igc-icon-button><igc-icon-buttonname="thumb-up"collection="material"variant="contained"class="large"></igc-icon-button></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:
Al igual que los componentes de botón normales, el botón de icono admite varias variantes: flat (predeterminado), contained y outlined; Para cambiar el tipo de botón de icono, establezca el atributo de variant del botón de icono.
<!DOCTYPE html><html><head><title>Icon Button Variants</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="sample"><igc-icon-buttonname="thumb-up"collection="material"variant="flat"></igc-icon-button><igc-icon-buttonname="thumb-up"collection="material"variant="contained"></igc-icon-button><igc-icon-buttonname="thumb-up"collection="material"variant="outlined"></igc-icon-button></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
El tamaño del botón se puede cambiar utilizando la variable CSS--ig-size a cualquiera de los tres tamaños admitidos:--ig-size-small,--ig-size-medium,--ig-size-large ( por defecto).
<!DOCTYPE html><html><head><title>Icon Button Sizing</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="sample"><igc-icon-buttonname="thumb-up"collection="material"variant="contained"class="small"></igc-icon-button><igc-icon-buttonname="thumb-up"collection="material"variant="contained"class="medium"></igc-icon-button><igc-icon-buttonname="thumb-up"collection="material"variant="contained"class="large"></igc-icon-button></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
El componente del botón de icono cambiará su estructura interna de <button> a un elemento de tipo <a> cuando se establezca el atributo href. En ese caso, el botón del icono puede considerarse como un enlace normal. Configurar el atributo href le permitirá configurar también los atributos rel, target y download del botón de icono.
Algunos íconos deben verse un poco diferentes cuando se usan en el modo De derecha a izquierda (RTL). Por ese motivo, proporcionamos un atributo mirrored que, cuando se configura, voltea el botón del ícono horizontalmente.
El componente del botón de icono expone dos partes CSS: base e icon que le permiten diseñar el elemento envolvente (<button> o <a>) y el elemento <igc-icon> envolvente;
<!DOCTYPE html><html><head><title>Icon Button Styling</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="sample"><igc-icon-buttonname="thumb-up"collection="material"variant="contained"></igc-icon-button></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