BwSplitView | bw-split-view

Overview

Split views are containers for BwSplitPanel's. You can create multiple resizable panels in one direction with split views. Nesting BwSplitView's allows you to create advanced layouts quickly and easily.

Usage

Fixed Panels

You can add the fixed attribute to a panel to prevent changes. This can be useful if the panel is intended to be a header or footer.

<bw-split-view vertical>
  <bw-split-panel fixed style="height: 10%"></bw-split-panel>
  <bw-split-panel primary></bw-split-panel>
  <bw-split-panel style="height: 45px;"></bw-split-panel>
</bw-split-view>

Nested Views

<bw-split-view>
  <bw-split-panel style="width: 20%;"></bw-split-panel>
  <bw-split-panel primary>
    <bw-split-view vertical>
      <bw-split-panel style="height: 56px;"></bw-split-panel>
      <bw-split-panel primary></bw-split-panel>
      <bw-split-panel style="height: 100px;">
        <bw-split-view>
          <bw-split-panel primary></bw-split-panel>
          <bw-split-panel style="width: 20%;"></bw-split-panel>
        </bw-split-view>
      </bw-split-panel>
    </bw-split-view>
  </bw-split-panel>
  <bw-split-panel style="width: 20%;"></bw-split-panel>
</bw-split-view>

Primary Panel

Every BwSplitView must have exactly one BwSplitPanel with the primary attribute. All the other panels base their calculations off the their position in reference to the primary panel.

<bw-split-view>
  <bw-split-panel style="width: 10%"></bw-split-panel>
  <bw-split-panel primary></bw-split-panel>
  <bw-split-panel style="width: 45px;"></bw-split-panel>
</bw-split-view>

Properties

Property	Attribute	Description	Type	Default
`vertical`	`vertical`	Aligns the panels vertically instead of horizontally	`boolean`	`false`

Overview​

Usage​

Fixed Panels​

Nested Views​

Primary Panel​

Properties​