Descripción general del botón Web Components

    The Web Components Button Component lets you enable clickable elements that trigger actions in your Web Components app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the Web Components Button OnClick event, toggle the Web Components button, disable the Web Components button, and more.

    Web Components Button Example

    EXAMPLE
    TS
    HTML
    ButtonOverviewStyle.css
    index.css

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

    Primero, debe instalar la 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í:

    import { defineComponents, IgcButtonComponent } from "igniteui-webcomponents";
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    defineComponents(IgcButtonComponent);
    ts

    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 IgcButtonComponent es la siguiente:

    <igc-button>Click me</igc-button>
    html
    Ignite UI for Web Components | CTA Banner

    Prefix / Suffix

    Con las ranuras prefix y suffix del componente IgcButtonComponent, podemos agregar contenido diferente antes y después del contenido principal del botón.

    <igc-button type="button" variant="contained">
        <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
    </igc-button>
    html

    Type

    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

    Button Variants

    Contained Button

    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.

    <igc-button variant="contained">Contained</igc-button>
    html

    EXAMPLE
    TS
    HTML
    CSS

    Outlined Button

    Todo lo que tienes que hacer para crear un botón outlined es cambiar el valor de la propiedad variant:

    <igc-button variant="outlined">Outlined</igc-button>
    html

    EXAMPLE
    TS
    HTML
    CSS

    Flat Button

    Analógicamente podemos pasar a la variante flat.

    <igc-button variant="flat">Flat</igc-button>
    html

    EXAMPLE
    TS
    HTML
    CSS

    Floating Action Button

    Podemos crear un botón de acción flotante configurando la propiedad variant en fab:

    <igc-button variant="fab">Fab</igc-button>
    html

    EXAMPLE
    TS
    HTML
    CSS

    Button Sizing

    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.

    import { defineComponents, IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
    defineComponents(IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent);
    ts
    <igc-radio-group id="radio-group" alignment="horizontal">
        <igc-radio name="size" value="small" label-position="after">Small</igc-radio>
        <igc-radio name="size" value="medium" label-position="after" checked>Medium</igc-radio>
        <igc-radio name="size" value="large" label-position="after">Large</igc-radio>
    </igc-radio-group>
    html
    this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;
    this.outlinedButton = document.getElementById('outlined-btn') as IgcButtonComponent;
    this.flatButton = document.getElementById('flat-btn') as IgcButtonComponent;
    this.containedButton = document.getElementById('contained-btn') as IgcButtonComponent;
    this.fabButton = document.getElementById('fab-btn') as IgcButtonComponent;
    
    this.radioGroup.addEventListener('click', (radio: any) => {
        this.outlinedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
        this.flatButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
        this.containedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
        this.fabButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    }); 
    ts

    El resultado de implementar el código anterior debería verse similar al siguiente:

    EXAMPLE
    TS
    HTML
    ButtonSizingStyle.css
    index.css

    Download

    Configurar la propiedad download le pedirá al usuario que guarde la URL vinculada en lugar de navegar hasta ella.

    <igc-button
        href=""
        variant="contained"
        download="url_to_content"
        target="_blank">
        Download
    </igc-button>
    html

    EXAMPLE
    TS
    HTML
    CSS

    Styling

    El componente del botón expone la parte CSS base que nos permite diseñar el elemento envuelto (<button> o <a>).

    igc-button::part(base) {
        background-color: #e99221;
        color: #011627;
        padding: 18px;
    }
    css

    EXAMPLE
    TS
    HTML
    ButtonStyle.css
    index.css

    API References

    Additional Resources