React Divider

    El Ignite UI for React Divider permite al autor del contenido crear fácilmente una regla horizontal/vertical como interrupción entre el contenido para organizar mejor la información en una página.

    React Divider Example

    Dependencies

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Luego tendrás que importar elIgrDivider CSS necesario y registrar su módulo, así:

    import { IgrDividerModule, IgrDivider } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDividerModule.register();

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

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

    <IgrDivider></IgrDivider>

    Usage

    Vertical Divider

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

    <IgrDivider vertical></IgrDivider>

    Type

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

    <IgrDivider type="dashed"></IgrDivider>

    Inset Divider

    SeIgrDivider 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
<IgrDivider middle="true" className="withInset"></IgrDivider>
// Left side only
<IgrDivider  className="withInset"></IgrDivider>

    Using Divider Inside Select Component

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

    <IgrSelect>
  <IgrSelectItem><span>Item 1</span></IgrSelectItem>
  <IgrSelectItem><span>Item 2</span></IgrSelectItem>
  <IgrDivider></IgrDivider>
  <IgrSelectItem><span>Item 2</span></IgrSelectItem>
</IgrSelect>

    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