VerticalSeparator

Reference

• The VerticalSeparator component is a styled <div> created.
• It is used to render a vertical line or separator with customizable dimensions, padding, margin, and color.

Props

1. width

   • Type: string
   • Default: '1px'
   • Description: Sets the width of the separator.

2. height

   • Type: string
   • Default: 'auto'
   • Description: Sets the height of the separator.

3. padding

   • Type: string
   • Default: '9px 0px'
   • Description: Sets the padding around the separator.

4. margin

   • Type: string
   • Default: '0px 8px'
   • Description: Sets the margin around the separator.

5. theme.colorPalette['PRIMARY_LIGHTER']

   • Description: The background color of the separator is dynamically set based on the theme.

Usage Example

function Example(pageContext) {
    const { protrakComponents } = React.useContext(customWidgetContext);
    const { VerticalSeparator } = protrakComponents;
    return(
    <div style={{ display: 'flex', alignItems: 'center' }}>
        <span>Item 1</span>
        <VerticalSeparator height="20px" />
        <span>Item 2</span>
    </div>
    );
}

• This renders a vertical line between "Item 1" and "Item 2" with a height of 20px.