Splitter

Summary

Splitters should be used to split content in two containers. The containers can be resized.

There are no attributes defined for this pattern.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a rhoncus arcu, vitae mollis diam. Cras sodales magna cursus libero porttitor mattis. Duis sollicitudin vulputate nulla et congue. Maecenas porta libero quis lorem consectetur finibus. Duis nec euismod lectus. Phasellus consequat vulputate suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet nunc non velit sagittis placerat. Quisque nec felis enim. Morbi ut tincidunt nisi, vel dapibus est. Pellentesque ipsum dolor, malesuada et leo et, pulvinar lacinia sem. Vivamus bibendum ipsum ante, eu consectetur enim ullamcorper luctus. Nam sollicitudin varius nisl vitae tempus. Quisque tempus venenatis quam eget sollicitudin.

Maecenas cursus luctus metus, et suscipit urna. Sed lacinia nec turpis in aliquet. Curabitur porttitor tortor in ornare aliquam. Phasellus eu tortor scelerisque velit faucibus tristique a nec eros. Nullam aliquam felis tortor, vel ultricies dolor tristique et. Etiam semper, tortor at iaculis commodo, dolor quam lobortis risus, in facilisis massa elit non odio. Donec lacinia augue quis massa molestie, blandit egestas eros vehicula. Praesent risus nibh, placerat quis felis id, commodo lacinia felis. Morbi non enim non felis convallis tempus sed et justo. Cras odio odio, blandit eu massa vitae, sagittis maximus diam. Mauris ac vehicula tellus. Praesent mauris ipsum, rhoncus non hendrerit non, aliquam non est. Donec tempor convallis elit, ut maximus justo auctor eu. Suspendisse a sapien egestas, blandit odio a, consequat justo.

Nulla fringilla orci sit amet nunc elementum, eu faucibus massa fringilla. Fusce at auctor risus. Proin condimentum, libero non tincidunt placerat, tortor dui molestie elit, et sodales elit elit id libero. Fusce in massa urna. Phasellus pharetra sem non hendrerit placerat. Aenean vel euismod lectus. Aliquam dignissim nec diam at hendrerit. Ut et ipsum in enim posuere accumsan. Nullam dignissim congue quam eget interdum. Nulla auctor semper euismod. Ut imperdiet ligula cursus, pulvinar sem eu, sagittis dolor.

Nunc a felis velit. Nam nec ipsum ultricies, luctus enim id, egestas nulla. Praesent eros neque, suscipit in ante eu, varius consequat eros. Suspendisse potenti. Proin iaculis, arcu nec venenatis volutpat, quam est euismod nibh, ut dictum nulla mauris eget enim. Duis fringilla quam non dignissim lacinia. Aenean sollicitudin, arcu in ultricies vulputate, libero sem mollis augue, ac aliquet lectus erat sodales ipsum. Nunc ultricies tincidunt varius. Vivamus et mauris non risus vulputate varius. Suspendisse sed quam arcu. Donec et magna velit. Mauris tincidunt nisl neque. Integer ultricies sed arcu et porttitor. Maecenas pharetra, neque placerat volutpat lacinia, est lectus gravida tellus, et vestibulum augue odio ut lectus. In sit amet ultricies urna. Quisque aliquam nisi ligula.

Cras eu lacus nec velit pellentesque convallis eu vel leo. Aenean varius, ante sed ornare bibendum, nulla leo rutrum dui, sit amet bibendum risus risus vitae elit. Pellentesque a ultrices lectus. Sed sed arcu id nibh ultricies egestas. Morbi sodales sit amet nunc in egestas. Nulla facilisi. Vestibulum eleifend auctor hendrerit. Ut laoreet justo quam, id sodales elit malesuada eget.

Fusce vel odio sit amet neque dictum tempus. Cras aliquet risus sit amet ornare ultricies. Nunc ut felis lacus. Suspendisse scelerisque, dolor a auctor iaculis, ex ligula porta nulla, auctor volutpat augue ex eget lacus. Etiam lacinia eu enim eget lacinia. Nullam sollicitudin augue neque, a pretium dolor ultricies vitae. Vestibulum maximus sapien sit amet commodo volutpat. Aliquam auctor sollicitudin lacus at suscipit. Quisque egestas interdum mattis. Ut a nunc non odio tempor faucibus. Sed eget varius leo. Mauris at euismod ante, nec luctus ante. Mauris quis justo ligula. Proin sollicitudin quis odio id scelerisque. Praesent congue massa sit amet facilisis dapibus.

Markup

<div class="splitter">
    <div class="splitter-pane1" style="background-color: #F5F5F5; padding: 20px;">
        ...
    </div>
    <div class="splitter-bar"></div>
    <div class="splitter-pane2" style="padding: 20px;">
        ...
    </div>
</div>
Fork me on GitHub