Visão geral do componente divisor Angular

    O componente divisor permite que os usuários separem o conteúdo horizontal e verticalmente.

    Angular Divider Example

    Por padrão, o divisor é uma linha horizontal sólida.

    Getting Started with Ignite UI for Angular Divider

    Para começar a usar o componente Ignite UI for Angular Divider, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    The next step is to import the IgxDividerModule in your app.module.ts file.

    // app.module.ts

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

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

    Alternatively, as of 16.0.0 you can import the IgxDividerDirective as a standalone dependency.

    // 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 {}

    Now that you have the Ignite UI for Angular Divider module or directive imported, you can start using the igx-divider component.

    Using the Angular Divider

    Vertical Divider

    By adding the vertical attribute and setting its value to true, you can change the direction of the divider from horizontal to vertical.

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

    Dashed Divider

    The default style of the divider is a solid line but it can also be dashed. To change the default look simply use the type attribute of the divider and set its value to dashed.

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

    Inset Divider

    The divider can be set in on both sides. To inset the divider, set the middle attribute of the divider to true and provider the desired inset value, the divider will start shrinking from both ends.

    Tenha em mente que você precisa adicionar unit(px,rem,%...) no final do valor, caso contrário, não funcionará.

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

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

    If the value of the middle attribute is set to a false value, or if the attribute is omitted altogether, the divider will set in only on the left.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.