Angular divider

• Line style and color
• Text style and color
• Text align
• Line without text

Demo

Table of contents

• Install
• Quick start
• Input
• Creator
• License

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

• http://www.linkedin.com/in/hakime-sheikhalishahi
• [email protected]

License

MIT