@halodigital/pane

Pane by Halo-Digital

This package contains a side pane with the following features:

• Horizontal and vertical Resizing

• Horizontal and vertical scrolling

• Close button

Enjoy!

Attributes

horizontalResize

_{Declare if the pane will be resizable horizontally and where to place the resize bar
Type: 'right' | 'left' Default: null}

verticalResize

_{Declare if the pane will be resizable vertically and where to place the resize bar
Type: 'top' | 'bottom'
Default: null}

state

_{The pane state
Type: 'opened' | 'closed'
Default: 'opened'}

showCloseButton

_{Declare if close button will appear in the right top corner
Type: boolean
Default: true}

Events

stateChange

_{Triggers on state change
Event Parameter Type: 'opened' | 'closed'}

sizeChange

_{Triggers on size change
Event Parameter Type: {dimension: 'width' | 'height', value: string}}

Example

<halo-pane
    horizontalResize="right"
    verticalResize="bottom"
    state="opened"
    [showCloseButton]="false"
    (stateChange)="stateChanged($event)"
    (sizeChange)="sizeChanged($event)">

    <div>Some content</div>

</halo-pane>