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.

    Ejemplo de divisor de Web Components

    EXAMPLE
    TS
    HTML
    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.

    dependencias

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

    npm install igniteui-webcomponents
    cmd
    import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcDividerComponent);
    ts

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

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

    <igc-divider></igc-divider>
    html
    Ignite UI for Web Components | CTA Banner

    Uso

    Divisor vertical

    Si se establece el vertical atributo, la dirección del divisor cambiaría de horizontal a vertical.

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

    EXAMPLE
    TS
    HTML
    DividerStyling.css
    index.css

    Tipo

    El Type atributo determina si se representa una línea divisoria solid o una dashed línea divisoria. El valor predeterminado es solid.

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

    EXAMPLE
    TS
    HTML
    CSS

    Divisor insertado

    Se IgcDividerComponent puede colocar en ambos lados. En inset el divisor, establezca el middle atributo en true en combinación con la--inset variable css. Esto reducirá la línea divisoria desde ambos lados. El valor predeterminado del middle atributo es false.

    /* DividerStyles.css */
    .withInset{
        --inset: 100px;
        --color:red;
    }
    css
    // Both side
    <igc-divider middle="true" class="withInset"></igc-divider>
    // Left side only 
    <igc-divider></igc-divider>
    html

    EXAMPLE
    TS
    HTML
    DividerStyling.css
    index.css

    Uso del divisor dentro del componente de selección

    En el ejemplo siguiente se muestra cómo se puede integrar el IgcDividerComponent para IgcSelectComponent 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>
    html

    EXAMPLE
    TS
    HTML
    CSS

    Variables CSS

    Intercalación

    La--inset variable css reduce el divisor en la cantidad dada desde el principio. Si se establece en el medio, se encogerá desde ambos lados.

    Color

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

    Referencias de API

    Recursos adicionales