Descripción general del componente divisor Angular

    El componente divisor permite a los usuarios separar el contenido tanto horizontal como verticalmente.

    Angular Divider Example

    Por defecto, el divisor es una línea horizontal continua.

    Getting Started with Ignite UI for Angular Divider

    Para comenzar con el componente Ignite UI for Angular Divisor, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular

    Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importarlosIgxDividerModule en tu archivo app.module.ts.

    // app.module.ts

...
import { IgxDividerModule } from 'igniteui-angular/directives';
// import { IgxDividerModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxDividerModule],
    ...
})
export class AppModule {}

    Alternativamente,16.0.0 puedes importarlosIgxDividerDirective como una dependencia independiente.

    // home.component.ts

import { IgxDividerDirective } from 'igniteui-angular/directives';
// import { IgxDividerDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-divider></igx-divider>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxDividerDirective]
})
export class HomeComponent {}

    Ahora que tienes importado el módulo o directiva Ignite UI for Angular Divisor, puedes empezar a usar eligx-divider componente.

    Using the Angular Divider

    Vertical Divider

    Añadiendo elvertical atributo y configurando su valor,true puedes cambiar la dirección del divisor de horizontal a vertical.

    <igx-divider [vertical]="true"></igx-divider>

    Dashed Divider

    El estilo predeterminado del divisor es unasolid línea, pero también puede serlodashed. Para cambiar el aspecto predeterminado, simplemente usa eltype atributo del divisor y establece su valor endashed.

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

    Inset Divider

    El divisor puede colocarse en ambos lados. Para insertar el divisor, se establece elmiddle atributo del divisor entrue y proporciona el valor deseadoinset, el divisor empezará a encogerse desde ambos extremos.

    Tenga en cuenta que debe agregar unit(px,rem,%...) al final del valor, de lo contrario, no funcionará.

    // Both side
<igx-divider [middle]="true" inset="80px"></igx-divider>

// Left side only 
<igx-divider inset="40px"></igx-divider>

    Si el valor delmiddle atributo se establece como un valor falso, o si el atributo se omite por completo, el divisor se colocará solo en la izquierda.

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.