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.
The next step is to import the IgxDividerModule in your app.module.ts file.
// 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 {}
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.
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>
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
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub