Splitter

Create a layout with panels that can be resized with splitter component.

About

New in 4.2.26

Create a layout with panels that can be resized with splitter component. To create it, add attribute data-role="splitter" to panel and add divs into this container.

                    <div data-role="splitter" class="h-100">
                        <div class="d-flex flex-justify-center flex-align-center">This is panel 1</div>
                        <div class="d-flex flex-justify-center flex-align-center">This is panel 2</div>
                    </div>
                

Vertical split

You can create vertical splitter with attribute data-split-mode="vertical"

                    <div data-role="splitter" class="h-100" data-split-mode="vertical">
                        <div class="d-flex flex-justify-center flex-align-center">This is panel 1</div>
                        <div class="d-flex flex-justify-center flex-align-center">This is panel 2</div>
                    </div>
                

Combine split

You can combine splitters to create complex layouts.

                    <div data-role="splitter" class="h-100">
                        <div class="d-flex flex-justify-center flex-align-center">This is panel 1</div>
                        <div data-role="splitter" data-split-mode="vertical">
                            <div class="d-flex flex-justify-center flex-align-center">Panel 1</div>
                            <div class="d-flex flex-justify-center flex-align-center">Panel 2</div>
                        </div>
                    </div>
                

Panels sizes

You can define initial sizes for panels with attribute data-split-sizes="...". Value must be a comma separated numeric values or one numeric value. If you can define one value, all panes can be initialed with this size. The panes initialed with property width: x%

                    <div data-role="splitter" class="h-100" data-split-sizes="70, 30">
                        <div class="d-flex flex-justify-center flex-align-center">This is panel 1</div>
                        <div class="d-flex flex-justify-center flex-align-center">This is panel 2</div>
                    </div>
                

Panels min sizes

You can define initial sizes for panels with attribute data-min-sizes="...". Value must be a comma separated numeric values or one numeric value. If you can define one value, all panes can be initialed with this size. The panes initialed with property min-width: Npx

                    <div data-role="splitter" class="h-100" data-min-sizes="100">
                        <div class="d-flex flex-justify-center flex-align-center">This is panel 1</div>
                        <div class="d-flex flex-justify-center flex-align-center">This is panel 2</div>
                    </div>
                

Gutter size

By default, gutter have size a 4px. You can change gutter size with attribute data-gutter-size.

                    <div data-role="splitter" class="h-100" data-gutter-size="10">
                        <div class="d-flex flex-justify-center flex-align-center">This is panel 1</div>
                        <div class="d-flex flex-justify-center flex-align-center">This is panel 2</div>
                    </div>