Azir Framwork : https://azir.io/docs

Hr

Hr/Divider are visual separators of content. Use Hr when you want to make a distinction between sections of content.

Installation

to install the latest version of azir-hr you only need to run:

npm install azir-hr  --save

or

yarn add azir-hr

Examples

Basic :

import Hr from "azir-hr";
---
<Hr />

Hr with Text :

import Hr from "azir-hr";
---
<Hr width={300} style={ {backgroundColor:"#eee"} }> Azir </Hr>

Hr Text style :

import Hr from "azir-hr";
---
<Hr  fontSize={30} textColor="#ff9900" textStyle={ {textDecorationLine:"underline"} } color="#aaa" textPadding="10%">
Azir
</Hr>

Hr Custom content :

import Hr from "azir-hr";
import { BrandIcons } from "azir-icon";
---
<Hr padding={0} color="success" borderWidth={2} >
  <Icon icon={BrandIcons.react} color="error" size={45} style={ {paddingLeft:10,paddingRight:10} } ></Icon>
</Hr>

Props

• width
• color
• borderWidth
• borderStyle
• fontSize
• textColor
• textStyle
• padding
• textPadding
• style

Reference

width

set the whole component width.

| Type | Required | Default | | ------ | -------- | ------------------------ | | Number | No | Fill the container width |

color

color of the hr line

| Type | Required | Default | | ------------------------------------------ | -------- | ------- | | azir-color | No | theme |

borderWidth

set the Hr Border thickness .

| Type | Required | Default | | ------ | -------- | ------------------------ | | Number | No | AzirTheme.SIZES.HR_WIDTH |

borderStyle

override hr style,since we are using border to render children then you can use all react native border style options

| Type | Required | | ----- | -------- | | style | No |

textColor

color of the hr text

| Type | Required | Default | | ------------------------------------------ | -------- | ------- | | azir-color | No | theme |

fontSize

set Hr text font size.

| Type | Required | Default | | ------ | -------- | -------------------- | | Number | No | AzirTheme.SIZES.FONT |

textStyle

override text style,since we are using text to render children then you can use all react native text props

| Type | Required | | ----- | -------- | | style | No |

padding

set Hr Left and right padding.

| Type | Required | Default | | ------ | -------- | -------------------------- | | Number | No | AzirTheme.SIZES.HR_PADDING |

textPadding

set Hr Text Left and right padding.

| Type | Required | Default | | ------ | -------- | ------------------------------- | | Number | No | AzirTheme.SIZES.HR_TEXT_PADDING |

style

override main container style.

| Type | Required | | ----- | -------- | | style | No |