Divider

Divide text or section components with some great features and quick to implement

Default

You can add a line to divide with the component vs-divider.

Text

You can add a text between the line to delimit two elements and have a description for the user.

Text Position

You can guide the text in 5 ways with property position:

• left
• left-center
• center (default)
• right-center

• right

  Color

  You can change the color of the component with the property color, you can use the main colors or RGB and HEX.

  WARNING Only > RGB and > HEX colors are supported.

  Icons

  To add an icon within the division we have the property icon. TIP Vuesax uses the > Google Material Icons font library by default. For a list of all available icons, visit the official > Material Icons page . Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.

  Style

  You can change line’s style with the property border-style. The allowed values are equivalent to the border-style property in CSS.

• dotted - Defines a dotted border

• dashed - Defines a dashed border
• solid - Defines a solid border (default)

  API

  | Name | Type | Parameters | Description | default | | —- | —- | —- | —- | —- | | position | String | (left, left-center, right-center, right) | Determine the position of the text or icon. | center | | color | String | | Change the color of the line and the text. | rgba(0,0,0.1) | | icon | String | Icon Class | Add an icon instead of the text. | | | border-style | String | | Determines the type of line in the component. | solid | | icon-pack | String | Icon Pack Class Name | Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. | material-icons |