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>