Angular divider
Custom divider with text
Angular divider
Line style and color
Text style and color
Text align
Line without text
Demo stackblitz
Table of contents
Install
npm i sh-angular-divider
Quick 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