Angular divider
Custom divider with text
Angular divider
Line style and colorText style and colorText alignLine without text
Demo
stackblitzTable of contents
Install
npm i sh-angular-dividerQuick start
import { ShAngularDividerModule } from "sh-angular-divider";
@NgModule({
imports: [ShAngularDividerModule],
})
export class AppModule {}In component
dividerConfig: IDividerConfig = {
height: 2,
lineStyle: "dashed",
lineColor: "green",
textColor: "green",
};<sh-angular-divider
[config]="dividerConfig"
[text]="'my text'"
></sh-angular-divider>Input
| Name | Type | Default | Required? | Description |
|---|---|---|---|---|
| config | IDividerConfig |
{} |
no | Divider config |
| text | number |
1px |
no | Text that you want to show in line |
Config
| Name | Type | Default | Required? | Description |
|---|---|---|---|---|
| height | number |
1px |
no | Line height |
| textAlign | string |
center |
no | Allowed values: left , right , center. |
| lineStyle | string |
solid |
no | Allowed values: dashed, dotted , solid , rounded
|
| lineColor | string |
gray |
no | Line color. |
| textColor | string |
gray |
no | Text color. |
| textClass | string |
- |
no | Set style for text, you can add one or more class name split by space. for example:'class1 class2 class3' |
Creator
Hakime sheikhalishahi
License
MIT