Smart Split Pane

Owned by Radu Nicoara (Unlicensed)
Oct 03, 2017
1 min read

The Smart Split Pane will split your content into two halves, providing a handle to resize them according to your needs.

<smart-split-pane visibility="md,lg">
      <div left-pane>
               <!-- left pane content here -->
      </div>
      <div right-pane>
               <!-- right pane content here -->
      </div>
</smart-split-pane>

 

The visibility attribute represents a comma separated list of screen sizes in which the splitter should be visible. Possible values are the same as bootstrap conventions:

  • xs (extra small)
  • sm (small)
  • md (medium)
  • lg (large)

If the visibility attribute is not set, then the splitter will be always visible.

The content for each side of the splitter should be wrapped within one root element, as exemplified above. The wrapper element should have the attribute left-pane to indicate that it should fill the left side of the splitter, and right-pane to indicate that it should fill the right side of the splitter. Direct children of the <smart-split-pane> element that do not have one of those attributes will not be displayed.