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.

    O próximo passo é importar o IgxDividerModule no seu arquivo 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 {}

    Como alternativa, a partir da 16.0.0 você pode importar o IgxDividerDirective como uma dependência autônoma.

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

    Agora que você importou o módulo ou a diretiva Ignite UI for Angular Divider, você pode começar a usar o componente igx-divider.

    Using the Angular Divider

    Vertical Divider

    Ao adicionar o atributo vertical e definir seu valor como true, você pode alterar a direção do divisor de horizontal para vertical.

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

    Dashed Divider

    O estilo padrão do divisor é uma linha solid, mas também pode ser dashed. Para alterar a aparência padrão, basta usar o atributo type do divisor e definir seu valor como dashed.

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

    Inset Divider

    O divisor pode ser definido em ambos os lados. Para inserir o divisor, defina o atributo middle do divisor como true e forneça o valor inset desejado, o divisor começará a encolher de ambas as extremidades.

    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>

    Se o valor do atributo middle for definido como falso, ou se o atributo for omitido completamente, o divisor será definido apenas à esquerda.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.