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 issoIgxDividerModule no seu arquivo 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 você pode importar comoIgxDividerDirective uma dependência independente.
// 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 {}
Agora que você importou o módulo ou diretiva do divisor Ignite UI for Angular, pode começar a usar oigx-divider componente.
Using the Angular Divider
Vertical Divider
Ao adicionar overtical atributo e definir seu valor paratrue, você pode mudar a direção do divisor de horizontal para vertical.
<igx-divider [vertical]="true"></igx-divider>
Dashed Divider
O estilo padrão do divisor é umasolid linha, mas também pode serdashed. Para mudar o visual padrão, basta usar otype atributo do divisor e definir seu valor paradashed.
<igx-divider type="dashed"></igx-divider>
Inset Divider
O divisor pode ser encaixado em ambos os lados. Para inserir o divisor, definir omiddle atributo do divisor paratrue e fornecer o valor desejadoinset, o divisor começará a encolher em 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 domiddle atributo for definido como um valor falso, ou se o atributo for omitido completamente, o divisor será posicionado apenas à esquerda.
API References
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub