Peek Drawer Pro

1. Mode — Choose the Panel Type

The mode property defines the core behavior of the component.

• mode → Enum: 'floating', 'drawer'
  Controls the operating mode of the panel. Choose between:

  • floating: A panel that floats and can be docked to the viewport edges.

  • drawer: A sliding drawer that opens from any side of the screen.

Example: Set mode="floating" for a draggable panel or mode="drawer" for a sliding panel.

2. Floating Mode Controls

Available when mode = "floating".

Docking Behavior

• floatingDock → Enum: 'auto', 'left', 'right', 'top', 'bottom'
  Specifies where the floating panel will dock relative to the viewport. The default value is 'auto', which auto-selects the nearest edge.

• floatingAllowedEdges → Enum: 'sides', 'vertical', 'all'
  Defines which edges the panel can dock to in auto mode. 'sides' allows only left and right, while 'vertical' limits it to top and bottom.

Panel Positioning

• floatingStartPosMode → Enum: 'px', 'percent'
  Determines the mode for setting the initial position of the panel. Use 'px' for absolute pixels or 'percent' for a percentage-based position.

• floatingStartPosPx → Number: 200
  The initial pixel position when floatingStartPosMode = 'px'.

• floatingStartPosPercent → Number: 25
  The initial position as a percentage of the available viewport space when floatingStartPosMode = 'percent'.

Peek Effect

• floatingPeekVisible → Number: 100
  Controls how much of the handle remains visible when the panel is closed. You can set this in pixels or as a percentage.

• floatingPeekUnit → Enum: 'px', '%'
  Defines the unit of measurement for the peek effect.

Handle Settings

• floatingHandleSource → Enum: 'connected', 'internal'
  Specifies the handle's source. 'connected' uses an external trigger, while 'internal' uses an internal handle.

• floatingHandleVisibility → Enum: 'always', 'open', 'closed', 'hidden'
  Determines when the handle is visible. You can make the handle always visible, only visible when open, or hidden.

Example: Set floatingHandleVisibility="always" to keep the handle always visible.

3. Drawer Mode Controls

Available when mode = "drawer".

Slide Direction

• drawer.slide → Enum: 'left', 'right', 'top', 'bottom'
  Specifies the direction from which the drawer will slide into view.

Example: Use drawer.slide="left" for a drawer that slides in from the left.

Trigger Source

• drawer.triggerSource → Enum: 'connected', 'internal'
  Defines whether the drawer opens via an external or internal trigger.

Panel Size

• drawer.sizeMode → Enum: 'fit', 'custom'
  Controls the sizing behavior of the drawer. Set to 'fit' for auto-sizing or 'custom' for custom width/height.

• drawer.widthPx → Number: 360
  Defines the drawer width in pixels when sizeMode = 'custom'.

• drawer.heightPx → Number: 640
  Defines the drawer height in pixels when sizeMode = 'custom'.

Overlay Settings

• drawer.overlayColor → String: 'rgba(0, 0, 0, 0.25)'
  Specifies the color of the backdrop behind the drawer.

• drawer.closeOnBackdrop → Boolean: true
  Determines whether clicking on the backdrop closes the drawer.

4. Global Controls

Behavior

• behavior.closeOnEscape → Boolean: true
  Allows the panel to close when the ESC key is pressed.

• behavior.portalMode → Enum: 'auto', 'never'
  Controls whether the component is rendered via portal for stacking context issues.

• behavior.zIndex → Number: 999999
  Defines the z-index for the panel, ensuring it stays on top of other elements.

Shadow

• shadow.enabled → Boolean: true
  Enables or disables the shadow effect on the panel.

• shadow.x → Number: 0
  Defines the horizontal offset for the shadow.

• shadow.y → Number: 4
  Defines the vertical offset for the shadow.

• shadow.blur → Number: 16
  Defines the blur radius for the shadow.

• shadow.color → String: 'rgba(0, 0, 0, 0.1)'
  Defines the color of the shadow.