DOCSEARCHbyAlgolia
Submit Docs

splitpanes

repository·main·Indexed 25 days ago

https://github.com/antoniandre/splitpanes

A reliable, simple, and touch-ready panes splitter and resizer for Vue.js applications. Supports Vue 3 and Vue 2 (via legacy package), providing components for layout containers and individual panes with configurable size constraints, orientation, and event handling for resizing and maximization.

Tokens
1.1K
Snippets
3
Records
7
Agent score
31%

What's inside splitpanes

  4. Configure the Splitpanes component props

    main

    The Splitpanes component accepts the following configuration props to control the layout behavior:

    • horizontal (boolean, optional): Sets the orientation of the panes. Defaults to vertical if not specified.
    • pushOtherPanes (boolean, optional): Determines if resizing a pane should push other panes.
    • maximizePanes (boolean, optional): Enables pane maximization functionality.
    • rtl (boolean, optional): Enables Right-to-Left layout.
    • firstSplitter (boolean, optional): Controls whether the first splitter is rendered.
    • keyboardStep (number, optional): Defines the step size for keyboard-based resizing.
    interface SplitpanesProps {
  horizontal?: boolean
  pushOtherPanes?: boolean
  maximizePanes?: boolean
  rtl?: boolean
  firstSplitter?: boolean
  keyboardStep?: number
}

  5. Handle Splitpanes component events

    main

    The Splitpanes component emits several events that allow you to react to layout changes and user interactions. The payloads for these events include information about the panes and the specific interaction:

    EventPayload InterfaceDescription
    readySplitpanesReadyPayloadFired when the component is initialized. Includes panes: PaneData[]
    resizeSplitpanesResizePayloadFired during splitter drag. Includes event, index, prevPane, nextPane, and panes
    resizedSplitpanesResizedPayloadFired after drag-end or pane add/remove. event, index, prevPane, and nextPane are optional
    pane-clickSplitpanesPaneClickPayloadFired when a pane is clicked. Includes event, index, pane, and panes
    pane-maximizeSplitpanesPaneMaximizePayloadFired when a pane is maximized. Includes event, index, pane, and panes
    pane-addSplitpanesPaneAddPayloadFired when a pane is added. Includes pane and panes
    pane-removeSplitpanesPaneRemovePayloadFired when a pane is removed. Includes pane and panes
    splitter-clickSplitpanesSplitterClickPayloadFired on splitter click. Includes event, index, prevPane, nextPane, and panes
    splitter-dblclickSplitpanesSplitterClickPayloadFired on splitter double-click. Same payload as splitter-click
    direction-changedSplitpanesDirectionChangedPayloadFired when orientation changes. Includes horizontal and panes

  6. Configure the Pane component props

    main

    The Pane component (used inside Splitpanes) accepts the following props to define its individual constraints:

    • size (number | string, optional): The initial size of the pane.
    • minSize (number | string, optional): The minimum allowable size for the pane.
    • maxSize (number | string, optional): The maximum allowable size for the pane.
    interface PaneProps {
  size?: number | string
  minSize?: number | string
  maxSize?: number | string
}

  7. Reference PaneData and Pane structures

    main

    When interacting with Splitpanes events, you will receive data structures representing the state of the panes.

    PaneData

    Used to represent the size constraints and current size of a pane in a simplified format.

    • min: number
    • max: number
    • size: number

    Pane

    Represents a specific pane instance within the component.

    • id: number
    • el: HTMLElement | null
    • min: number
    • max: number
    • givenSize: number | null
    • size: number
    • index: number
    export interface PaneData {
  min: number
  max: number
  size: number
}

export interface Pane {
  id: number
  el: HTMLElement | null
  min: number
  max: number
  givenSize: number | null
  size: number
  index: number
}