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 Divider, 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 a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxDividerModule en su archivo app.module.ts.

    // app.module.ts

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

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

    Alternativamente, a partir de 16.0.0 puede importar IgxDividerDirective como una dependencia independiente.

    // home.component.ts

import { IgxDividerDirective } from 'igniteui-angular';
// 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 tiene importada la directiva o el módulo Ignite UI for Angular Divider, puede comenzar a usar el componente igx-divider.

    Using the Angular Divider

    Vertical Divider

    Al agregar el atributo vertical y establecer su valor en true, puede cambiar la dirección del divisor de horizontal a vertical.

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

    Dashed Divider

    El estilo predeterminado del divisor es una línea solid pero también puede ser dashed. Para cambiar la apariencia predeterminada, simplemente use el atributo type del divisor y establezca su valor en dashed.

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

    Inset Divider

    El divisor se puede colocar por ambos lados. Para insertar el divisor, establezca el atributo middle del divisor en true y proporcione el valor inset deseado, el divisor comenzará a reducirse 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 del atributo del middle se establece en un valor falso, o si el atributo se omite por completo, el divisor se establecerá solo a la izquierda.

    API References

    Additional Resources

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