Slithe

Appearance

Splitter ​

A sl-splitter component provides a way to split the layout in two movable areas.

Slots ​

The component includes a blue, and a green slot.

  • Horizontal: blue=left - green=right
  • Vertical: blue=top - green=bottom
Blue
Green
Horizontal
Blue
Green
Vertical
html
<!-- Horizontal -->
<sl-splitter horizontal>
  <div slot="blue">Blue</div>
  <div slot="green">Green</div>
</sl-splitter>
<!-- Vertical -->
<sl-splitter vertical>
  <div slot="blue">Blue</div>
  <div slot="green">Green</div>
</sl-splitter>

Attributes ​

BlueSize ​

The initial blue splitter size.

BlueSize defaults to 50.

Blue
Green
html
<sl-splitter blueSize="75">
  <div slot="blue">Blue</div>
  <div slot="green">Green</div>
</sl-splitter>

MinBlue - MaxBlue ​

The minimum and maximum blue splitter size.

MinBlue defaults to 0.

MaxBlue defaults to 100.

Blue
Green
html
<sl-splitter minBlue="25" maxBlue="75">
  <div slot="blue">Blue</div>
  <div slot="green">Green</div>
</sl-splitter>

Disabled ​

Makes the splitter non-interactable.

Blue
Green
html
<sl-splitter disabled>
  <div slot="blue">Blue</div>
  <div slot="green">Green</div>
</sl-splitter>