Basic
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac elit at erat eleifend aliquet vel id justo. Nullam nec nunc nec nunc ultricies ultricies. Nullam nec nunc nec nunc ultricies ultricies.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac elit at erat eleifend aliquet vel id justo. Nullam nec nunc nec nunc ultricies ultricies. Nullam nec nunc nec nunc ultricies ultricies.
Description
This component is used to separate content, it can contain text or any custom template.
API
import { LuiDividerModule } from '@lqvrent-workspace/lqvrent-ui/divider';<lui-divider></lui-divider>lui-divider
| Property | Description | Type | Default |
|---|---|---|---|
[luiOrientation] | Orientation of divider | 'horizontal' | 'vertical' | horizontal |
[luiContentLeft] | Content on the left side | string | TemplateRef<void> | - |
[luiContentCenter] | Content in the center | string | TemplateRef<void> | - |
[luiContentRight] | Content on the right side | string | TemplateRef<void> | - |
[luiBackgroundClasses] | Classes used when any luiContent input is a string, commonly to define a background color | string | - |
[luiDashed] | Whether the divider is dashed | boolean | false |
More examples
Horizontal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac elit at erat eleifend aliquet vel id justo. Nullam nec nunc nec nunc ultricies ultricies. Nullam nec nunc nec nunc ultricies ultricies.
My title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac elit at erat eleifend aliquet vel id justo. Nullam nec nunc nec nunc ultricies ultricies. Nullam nec nunc nec nunc ultricies ultricies.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac elit at erat eleifend aliquet vel id justo. Nullam nec nunc nec nunc ultricies ultricies. Nullam nec nunc nec nunc ultricies ultricies.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac elit at erat eleifend aliquet vel id justo. Nullam nec nunc nec nunc ultricies ultricies. Nullam nec nunc nec nunc ultricies ultricies.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac elit at erat eleifend aliquet vel id justo. Nullam nec nunc nec nunc ultricies ultricies. Nullam nec nunc nec nunc ultricies ultricies.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac elit at erat eleifend aliquet vel id justo. Nullam nec nunc nec nunc ultricies ultricies. Nullam nec nunc nec nunc ultricies ultricies.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac elit at erat eleifend aliquet vel id justo. Nullam nec nunc nec nunc ultricies ultricies. Nullam nec nunc nec nunc ultricies ultricies.
Be sure that the content don't have any vertical margin, otherwise it will be misaligned with the divider.
Vertical
When in vertical, luiClasses and luiContent inputs are not used.