Splitter - CSS API Reference

All Common CSS variables:

Specific CSS variables for Splitter styling:

• --smart-splitter-default-width: Splitter default width.
• --smart-splitter-default-height: Splitter default height.
• --smart-splitter-bar-size: Defines splitter bar size.

The following CSS selectors can be used to style Splitter:

• smart-splitter - the element itself. Can be used to set width and height for the whole element.
  • .smart-container - a container that holds the inner structure of the element. Normally it shoudn't be used for styling.
    • CONTENT element - all inserted items and bar are stored in this container.

The following CSS selectors can be used to style Splitter Item:

• smart-splitter-item - a splitter item element that is used to insert content inside the Splitter.
  • .smart-container - a container that holds the inner structure of the element. Normally it shoudn't be used for styling.
    • .smart-header - a header container. ( for a future feature )
    • .smart-content - a container for the content of the item.
      • CONTENT element - a container for the content of the item.

The following CSS selectors can be used to style Splitter Bar:

• smart-splitter-bar - a splitter bar element that is autogenerated by the Splitter in order to separate two items.
  • .smart-container - a container that holds the inner structure of the element. Normally it shoudn't be used for styling.
    • .smart-splitter-far-collapse-button - a DIV element that represents the collapse button for the far side of the bar.
      • .smart-arrow - a container for the button icon.
    • .smart-splitter-resize-button - a DIV element that represents the resize button/area used to resize the items.
      • span - a simple span element used as an icon container to indicate the resize zone.
    • .smart-splitter-near-collapse-button - a DIV element that represents the collapse button for the near side of the bar.
      • .smart-arrow - a container for the button icon.

Demo

<style>
        #splitter{
			--smart-font-size: 20px;
        }
</style>