metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Splitter - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Splitter</a></li> <li class="toc-entry"><a href="#_splitter_about">About</a></li> <li class="toc-entry"><a href="#_splitter_vertical">Vertical split</a></li> <li class="toc-entry"><a href="#_splitter_combine">Combine split</a></li> <li class="toc-entry"><a href="#_splitter_sizes">Panels sizes</a></li> <li class="toc-entry"><a href="#_splitter_min">Min panes size</a></li> <li class="toc-entry"><a href="#_splitter_gutter">Gutter size</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Splitter</h1> <p class="text-leader"> Create a layout with panels that can be resized with splitter component. </p>  <h3 id="_splitter_about">About</h3> <p class="text-small">New in 4.2.26</p> <p> Create a layout with panels that can be resized with <code>splitter</code> component. To create it, add attribute <code>data-role="splitter"</code> to panel and add divs into this container. </p> <div class="example p-0" style="height: 400px"> <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> </div> <pre><code> <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> </code></pre> <h3 id="_splitter_vertical">Vertical split</h3> <p> You can create vertical splitter with attribute <code>data-split-mode="vertical"</code> </p> <div class="example p-0" style="height: 400px"> <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> </div> <pre><code> <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> </code></pre>  <h3 id="_splitter_combine">Combine split</h3> <p> You can combine splitters to create complex layouts. </p> <div class="example p-0" style="height: 400px"> <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> </div> <pre><code> <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> </code></pre> <h3 id="_splitter_sizes">Panels sizes</h3> <p> You can define initial sizes for panels with attribute <code>data-split-sizes="..."</code>. 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 <code>width: x%</code> </p> <div class="example p-0" style="height: 400px"> <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> </div> <pre><code> <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> </code></pre> <h3 id="_splitter_min">Panels min sizes</h3> <p> You can define initial sizes for panels with attribute <code>data-min-sizes="..."</code>. 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 <code>min-width: Npx</code> </p> <div class="example p-0" style="height: 400px"> <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> </div> <pre><code> <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> </code></pre> <h3 id="_splitter_gutter">Gutter size</h3> <p> By default, <code>gutter</code> have size a <code>4px</code>. You can change gutter size with attribute <code>data-gutter-size</code>. </p> <div class="example p-0" style="height: 400px"> <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> </div> <pre><code> <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> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>