El componente Botón Web Components te permite habilitar elementos en los que se puede hacer clic y que desencadenan acciones en tu aplicación Web Components. Obtiene control total sobre cómo establecer las variantes de botón, configurar los estilos para el elemento ajustado y definir los tamaños. El componente Button también ofrece flexibilidad a través del evento Button OnClick Web Components, alternar el botón Web Components, deshabilitar el botón Web Components y mucho más.
<!DOCTYPE html><html><head><title>Button Overview</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"><divclass="button-container"><igc-buttonvariant="flat">Flat</igc-button><igc-buttonvariant="contained">Contained</igc-button><igc-buttonvariant="outlined">Outlined</igc-button></div></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 kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
cmd
Luego necesitarás importar IgcButtonComponent, su CSS necesario y registrar su módulo, así:
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.
La forma más sencilla de empezar a utilizarlo IgcButtonComponent es la siguiente:
<igc-button>Click me</igc-button>html
Prefijo sufijo
Con las ranuras prefix y suffix del componente IgcButtonComponent, podemos agregar contenido diferente antes y después del contenido principal del botón.
El componente del botón cambiará su estructura interna de un <button> a un elemento de tipo <a> cuando se establezca el atributo href. En ese caso, el botón puede considerarse como un enlace normal. Configurar el atributo href le permitirá configurar también los atributos rel, target y download. En el caso de que el componente del botón utilice un elemento <button> real internamente, podemos especificar su Type estableciendo la propiedad en cualquiera de los siguientes valores:
Submit: cuando queremos enviar los datos del formulario.
reset- cuando queremos restablecer los datos del formulario a sus valores iniciales
button: cuando queremos agregar un botón con una funcionalidad personalizada en cualquier lugar de una página web
Variantes de botones
Botón contenido
Utilice el atributo variant para agregar un botón contenido simple en su plantilla de componente. Tenga en cuenta que si no configura la variante, de forma predeterminada se configurará como contenida.
<!DOCTYPE html><html><head><title>Contained Button</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-buttonvariant="contained">Contained</igc-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
Botón delineado
Todo lo que tienes que hacer para crear un botón outlined es cambiar el valor de la propiedad variant:
<!DOCTYPE html><html><head><title>Outlined Button</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-buttonvariant="outlined">Outlined</igc-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
<!DOCTYPE html><html><head><title>Flat Button</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-buttonvariant="flat">Flat</igc-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
Botón de acción flotante
Podemos crear un botón de acción flotante configurando la propiedad variant en fab:
<!DOCTYPE html><html><head><title>Floating Action Button</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-buttonvariant="fab"><spanslot="prefix">+</span>
Add
</igc-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
Tamaño del botón
Los usuarios pueden cambiar el tamaño del componente button usando la variable CSS--ig-size. En el siguiente ejemplo, agregaremos algunos botones de opción para mostrar todos los valores de tamaño. De esta manera, cada vez que se seleccione uno, cambiaremos el tamaño del botón.
<!DOCTYPE html><html><head><title>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="container sample center"><igc-radio-groupid="radio-group"alignment="horizontal"><igc-radioname="size"value="small"label-position="after">Small</igc-radio><igc-radioname="size"value="medium"label-position="after"checked>Medium</igc-radio><igc-radioname="size"value="large"label-position="after">Large</igc-radio></igc-radio-group><divclass="button-container"><igc-buttonid="flat-btn"variant="flat">Flat</igc-button><igc-buttonid="contained-btn"variant="contained">Contained</igc-button><igc-buttonid="outlined-btn"variant="outlined">Outlined</igc-button><igc-buttonid="fab-btn"variant="fab">Like</igc-button></div></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>Download Button</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-buttonhref=""variant="contained"download="url"target="_blank">
Download
</igc-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
Estilo
El componente del botón expone la parte CSS base que nos permite diseñar el elemento envuelto (<button> o <a>).
<!DOCTYPE html><html><head><title>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="container sample center"><igc-buttonvariant="contained">Contained</igc-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