UNPKG

igniteui-angular-sovn

Version:

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

44 lines (35 loc) 1.41 kB
# igx-divider The **igx-divider** is a directive that groups content in lists and layout. ## Examples ### Basic Divider ```html <igx-divider></igx-divider> ``` ### Dashed Divider ```html <!-- Will set in the divider `16px` on both sides.` --> <igx-divider type="dashed"></igx-divider> ``` ### Vertical Divider ```html <igx-divider [vertical]="true"></igx-divider> ``` ### Inset Divider ```html <!-- Will set in the divider `16px` from the left.` --> <igx-divider inset="16px"></igx-divider> ``` ### Middle Inset Divider ```html <!-- Will set in the divider `16px` on both sides.` --> <igx-divider [middle]="true" inset="16px"></igx-divider> ``` # API Summary | Name | Type | Description | |:----------|:-------------:|:------| | `id` | string | Unique identifier of the component. If not provided it will be automatically generated.| | `role` | string | The role attribute of the divider. By default it's set to `separator`. | | `type` | IgxDividerType | The type of the divider. Can be `solid` or `dashed`. | | `inset` | string | The space between the separator and the surrounding container. Provide the value in `px`, `%`, or relative units(`em`, `rem`). | | `middle` | boolean | When set to `true`, the divider will be set in on both sides when an `inset` value is provided. | | `vertical` | boolean | Whether the divider should be vertically layed out. |