Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Vertical
      • Horizontal
      • Grid
    • Customization
      • Vertical collapse
      • Horizontal collapse
      • Splitter button position
    • Configuration
    • API
      • PaneProvider
      • Pane

    Pane

    Panes give users a quick way to resize layouts vertically or horizontally by interacting with the splitter. They can also be used to create expandable or collapsible layouts.

    Table of Contents
    • How to use it
      • Vertical
      • Horizontal
      • Grid
    • Customization
      • Vertical collapse
      • Horizontal collapse
      • Splitter button position
    • Configuration
    • API
      • PaneProvider
      • Pane
    Used for this
    • To make a structured layout resizable, expandable, or collapsible

    How to use it

    Vertical

    Panes can be used in a vertical orientation. The panes resize up to the values that you set.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Horizontal

    Panes can be used in a horizontal orientation as well.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Grid

    Panes can be resized in both vertical and horizontal directions for a complex grid flexible layout.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Customization

    Panes can be collapsed or expanded by using the SplitterButton.

    Vertical collapse

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Horizontal collapse

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Splitter button position

    The SplitterButton can be positioned at the start, center or end of the splitter. Its default position is at the start when used in vertical orientation and at the center when used in horizontal orientation.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.4.0•View source•View on npm
    • Installnpm install @zendeskgarden/react-grid
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Pane, PaneProvider } from '@zendeskgarden/react-grid'

    API

    PaneProvider

    Prop nameTypeDefaultDescription
    children
    (({ id, getColumnValue, getRowValue, getGridTemplateRows, getGridTemplateColumns }: { id: string; getColumnValue: (splitterKey: string, isPixels?: boolean) => number; getRowValue: (splitterKey: string, isPixels?: boolean) => number; getGridTemplateRows: (isPixels?: boolean | undefined) => str...

    Surfaces render props for applying splitter state to the supporting layout

    Parameters
    id

    Provides the id prop, if specified; otherwise, a generated ID.

    getColumnValue

    Gets column value by key

    getRowValue

    Gets row value by key

    getGridTemplateRows

    Gets grid template rows track

    getGridTemplateColumns

    Gets grid template columns track

    columnValues
    		Record<string, number>

    Defines column values, in fr units, for a controlled layout. The values are keyed by splitter.

    defaultColumnValues
    		Record<string, number>

    Defines default column values, in fr units, for an uncontrolled layout. The values are keyed by splitter.

    defaultRowValues
    		Record<string, number>

    Defines default row values, in fr units, for an uncontrolled layout. The values are keyed by splitter.

    id
    		string

    Identifies the pane provider

    onChange
    ((rowValues: Record<string, number>, columnValues: Record<string, number>) => void)

    Handles splitter position changes

    Parameters
    rowValues

    The updated row values

    columnValues

    The updated column values

    rowValues
    		Record<string, number>

    Defines row values, in fr units, for a controlled layout. The values are keyed by splitter.

    totalPanesHeight
    		number
    Required

    Provides the total height, in px units, of all panes in the layout

    totalPanesWidth
    		number
    Required

    Provides the total width, in px units, of all panes in the layout

    Pane

    Extends HTMLAttributes<HTMLDivElement>

    Pane.Content

    Extends HTMLAttributes<HTMLDivElement>

    Pane.Splitter

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    isFixed
    		boolean

    Determines if the splitter only toggles between min and max

    layoutKey
    		string
    Required

    Specifies the splitter key

    max
    		number
    Required

    Sets a maximum, in fr units, for splitter position

    min
    		number
    Required

    Sets a minimum, in fr units, for splitter position

    orientation
    		'end' | 'start' | 'top' | 'bottom'
    'end'

    Determines splitter orientation within a pane

    providerId
    		string

    Identifies the associated PaneProvider. Assumes the closest parent provider, by default.

    Pane.SplitterButton

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    Prop nameTypeDefaultDescription
    label
    		string
    Required

    Renders the provided label text inside a tooltip

    placement
    		'end' | 'start' | 'center'

    Adjusts the placement of the splitter button. Assumes start when vertical and center when horizontal, by default.

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024