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
Markdown
# 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. |