Split Panel

SplitPanel(
  _.slots.start(
    div(
      height.px(200),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "Start"
    )
  ),
  _.slots.end(
    div(
      height.px(200),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "End"
    )
  )
)()

SplitPanel(  _.slots.start(    div(      height.px(200),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "Start"    )  ),  _.slots.end(    div(      height.px(200),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "End"    )  ))()

Examples

Initial Position

To set the initial position, use the position attribute. If no position is provided, it will default to 50% of the available space.

SplitPanel(
  _.position := 75,
  _.slots.start(
    div(
      height.px(200),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "Start"
    )
  ),
  _.slots.end(
    div(
      height.px(200),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "End"
    )
  )
)()

SplitPanel(  _.position := 75,  _.slots.start(    div(      height.px(200),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "Start"    )  ),  _.slots.end(    div(      height.px(200),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "End"    )  ))()

Initial Position in Pixels

To set the initial position in pixels instead of a percentage, use the position-in-pixels attribute.

SplitPanel(
  _.positionInPixels := 150,
  _.slots.start(
    div(
      height.px(200),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "Start"
    )
  ),
  _.slots.end(
    div(
      height.px(200),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "End"
    )
  )
)()

SplitPanel(  _.positionInPixels := 150,  _.slots.start(    div(      height.px(200),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "Start"    )  ),  _.slots.end(    div(      height.px(200),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "End"    )  ))()

Orientation

Set the orientation attribute to vertical and provide a height to render the split panel in a vertical orientation where the start and end panels are stacked.

SplitPanel(
  _.orientation.vertical,
  _.style := "height: 400px;",
  _.slots.start(
    div(
      background := "var(--wa-color-surface-lowered)",
      cls("h-full flex items-center justify-center overflow-hidden"),
      "Start"
    )
  ),
  _.slots.end(
    div(
      background := "var(--wa-color-surface-lowered)",
      cls("h-full flex items-center justify-center overflow-hidden"),
      "End"
    )
  )
)()

SplitPanel(  _.orientation.vertical,  _.style := "height: 400px;",  _.slots.start(    div(      background := "var(--wa-color-surface-lowered)",      cls("h-full flex items-center justify-center overflow-hidden"),      "Start"    )  ),  _.slots.end(    div(      background := "var(--wa-color-surface-lowered)",      cls("h-full flex items-center justify-center overflow-hidden"),      "End"    )  ))()

To snap panels at specific positions while dragging, add the snap attribute with one or more space-separated values. Values must be in pixels or percentages. For example, to snap the panel at 100px and 50%, use snap="100px 50%". You can also customize how close the divider must be before snapping with the snap-threshold attribute.

div(
  cls("split-panel-snapping"),
  SplitPanel(
    _.snap := "100px 50%",
    _.slots.start(
      div(
        height.px(200),
        background := "var(--wa-color-surface-lowered)",
        cls("flex items-center justify-center overflow-hidden"),
        "Start"
      )
    ),
    _.slots.end(
      div(
        height.px(200),
        background := "var(--wa-color-surface-lowered)",
        cls("flex items-center justify-center overflow-hidden"),
        "End"
      )
    )
  )(),
  div(cls("split-panel-snapping-dots"))
)

div(  cls("split-panel-snapping"),  SplitPanel(    _.snap := "100px 50%",    _.slots.start(      div(        height.px(200),        background := "var(--wa-color-surface-lowered)",        cls("flex items-center justify-center overflow-hidden"),        "Start"      )    ),    _.slots.end(      div(        height.px(200),        background := "var(--wa-color-surface-lowered)",        cls("flex items-center justify-center overflow-hidden"),        "End"      )    )  )(),  div(cls("split-panel-snapping-dots")))

Disabled

Add the disabled attribute to prevent the divider from being repositioned.

SplitPanel(
  _.disabled := true,
  _.slots.start(
    div(
      height.px(200),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "Start"
    )
  ),
  _.slots.end(
    div(
      height.px(200),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "End"
    )
  )
)()

SplitPanel(  _.disabled := true,  _.slots.start(    div(      height.px(200),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "Start"    )  ),  _.slots.end(    div(      height.px(200),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "End"    )  ))()

Min & Max

To set a minimum or maximum size of the primary panel, use the --min and --max custom properties. Since the secondary panel is flexible, size constraints can only be applied to the primary panel. If no primary panel is designated, these constraints will be applied to the start panel.

This examples demonstrates how you can ensure both panels are at least 150px using --min, --max, and the calc() function.

SplitPanel(
  _.style := "--min: 150px; --max: calc(100% - 150px);",
  _.slots.start(
    div(
      height.px(200),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "Start"
    )
  ),
  _.slots.end(
    div(
      height.px(200),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "End"
    )
  )
)()

SplitPanel(  _.style := "--min: 150px; --max: calc(100% - 150px);",  _.slots.start(    div(      height.px(200),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "Start"    )  ),  _.slots.end(    div(      height.px(200),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "End"    )  ))()

Nested Split Panels

Create complex layouts that can be repositioned independently by nesting split panels.

SplitPanel(
  _.slots.start(
    div(
      height.px(400),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "Start"
    )
  ),
  _.slots.end(
    div(
      SplitPanel(
        _.orientation.vertical,
        _.style := "height: 400px;",
        _.slots.start(
          div(
            background := "var(--wa-color-surface-lowered)",
            cls("h-full flex items-center justify-center overflow-hidden"),
            "Top"
          )
        ),
        _.slots.end(
          div(
            background := "var(--wa-color-surface-lowered)",
            cls("h-full flex items-center justify-center overflow-hidden"),
            "Bottom"
          )
        )
      )()
    )
  )
)()

SplitPanel(  _.slots.start(    div(      height.px(400),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "Start"    )  ),  _.slots.end(    div(      SplitPanel(        _.orientation.vertical,        _.style := "height: 400px;",        _.slots.start(          div(            background := "var(--wa-color-surface-lowered)",            cls("h-full flex items-center justify-center overflow-hidden"),            "Top"          )        ),        _.slots.end(          div(            background := "var(--wa-color-surface-lowered)",            cls("h-full flex items-center justify-center overflow-hidden"),            "Bottom"          )        )      )()    )  ))()

Customizing the Divider

You can target the divider part to apply CSS properties to the divider. To add a custom handle, slot an icon into the divider slot. When customizing the divider, make sure to think about focus styles for keyboard users.

SplitPanel(
  _.style := "--divider-width: 20px;",
  _.slots.divider(
    Icon(
      _.name := "grip-vertical"
    )()
  ),
  _.slots.start(
    div(
      height.px(200),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "Start"
    )
  ),
  _.slots.end(
    div(
      height.px(200),
      background := "var(--wa-color-surface-lowered)",
      cls("flex items-center justify-center overflow-hidden"),
      "End"
    )
  )
)()

SplitPanel(  _.style := "--divider-width: 20px;",  _.slots.divider(    Icon(      _.name := "grip-vertical"    )()  ),  _.slots.start(    div(      height.px(200),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "Start"    )  ),  _.slots.end(    div(      height.px(200),      background := "var(--wa-color-surface-lowered)",      cls("flex items-center justify-center overflow-hidden"),      "End"    )  ))()