Web Components Divider

    El divisor de Ignite UI for Web Components permite al autor del contenido crear fácilmente una regla horizontal/vertical como un descanso entre el contenido para organizar mejor la información en una página.

    Web Components Divider Example

    Dependencies

    En primer lugar, debe instalar el paquete Ignite UI for Web Components npm ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';

defineComponents(IgcDividerComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    EsIgcDividerComponent capaz de mostrar imágenes, iniciales o cualquier otro contenido, incluidos iconos. Declarar unIgcDividerComponent es tan simple como:

    <igc-divider></igc-divider>

    Usage

    Vertical Divider

    Si elvertical atributo está activado, la dirección del divisor cambiaría de horizontal a vertical.

    <igc-divider vertical></igc-divider>

    Type

    Eltype atributo determina si se debe representar unasolid línea o unadashed línea divisoria. El valor por defecto essolid.

    <igc-divider type="dashed"></igc-divider>

    Inset Divider

    SeIgcDividerComponent pueden colocar en ambos lados. Alinset divisor, establece elmiddle atributo en verdadero en combinación con la--inset variable css. Esto reducirá la línea divisoria desde ambos lados. El valor por defecto delmiddle atributo es falso.

    /* DividerStyles.css */
.withInset{
    --inset: 100px;
    --color:red;
}

    // Both side
<igc-divider middle="true" class="withInset"></igc-divider>
// Left side only
<igc-divider></igc-divider>

    Using Divider Inside Select Component

    El siguiente ejemplo ilustra cómo se pueden integrarIgcDividerComponent dentro de paraIgcSelectComponent distinguir dos grupos de elementos.

    <igc-select>
  <igc-select-item>Item 1</igc-select-item>
  <igc-select-item>Item 2</igc-select-item>
  <igc-divider></igc-divider>
  <igc-select-item>Item 3</igc-select-item>
</igc-select>

    CSS Variables

    Inset

    La--inset variable css reduce el divisor en la cantidad dada desde el principio. Si el centro está fijado, se encogerá por ambos lados.

    Color

    La--color variable css establece el color del divisor.

    API References

    Additional Resources