Blazor Divider

    El divisor Ignite UI for Blazor 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.

    Blazor Divider Example

    Dependencies

    Antes de usarlosIgbDivider, debes registrarlo de la siguiente manera:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbDividerModule));

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbDivider componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

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

    <IgbDivider></IgbDivider>

    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.

    <IgbDivider Type="dashed"></igrDivider>

    Inset Divider

    SeIgbDivider 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
<IgbDivider Middle="True" class="withInset"</igrDivider>
// Left side only
<IgbDivider class="withInset"</igrDivider>

    Using Divider Inside Select Component

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

    <IgbSelect>
 <IgbSelectItem>Item 1</IgbSelectItem>
 <IgbSelectItem>Item 2</IgbSelectItem>
 <IgbDivider></IgbDivider>
 <IgbSelectItem>Item 2</IgbSelectItem>
</IgbSelect>

    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