oda-framework/components/layouts/splitter/index.html

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <oda-tester> -->
    <oda-splitter-tester></oda-splitter-tester>
<!-- </oda-tester> -->
<script type="module">
    import '../../../oda.js';
    import './splitter.js';
    ODA({is: 'oda-splitter-tester',
        template: `
            <style>
                :host{
                    @apply --flex;
                    @apply --vertical;
                    height: 100%;
                }
            </style>
            <div class="flex horizontal" style="max-height: 100%;">
                <div class="horizontal" style="min-width: 120px;">
                    <div class="flex" style="padding: 12px;">СПЛИТТЕР СПРАВА</div>
                    <oda-splitter></oda-splitter>
                </div>
                <div class="flex vertical" style="min-width: 120px;">
                    <div class="vertical" style="max-height: 95%;">
                        <div class="flex" style="padding: 12px;">СПЛИТТЕР СНИЗУ</div>
                        <oda-splitter align="horizontal"></oda-splitter>
                    </div>
                    <div class="flex"></div>
                </div>
            </div>
        `
    })
</script>