UNPKG

@ihatecode/react-splitter

Version:

A split pane component written in React.

62 lines (50 loc) 1.21 kB
.ihc-splitter-wrapper { width: 100%; height: 100%; display: flex; --ihc-splitter-size: 1px; --ihc-splitter-color: #eee; } .ihc-splitter-vertical { flex-direction: column; } .ihc-splitter-resizing { user-select: none; } .ihc-splitter-horizontal.ihc-splitter-resizing { cursor: col-resize; } .ihc-splitter-vertical.ihc-splitter-resizing { cursor: row-resize; } .ihc-splitter-vertical>.ihc-splitbar { height: var(--ihc-splitter-size); min-height: var(--ihc-splitter-size); width: 100%; cursor: row-resize; } .ihc-splitter-horizontal>.ihc-splitbar { width: var(--ihc-splitter-size); min-width: var(--ihc-splitter-size); height: 100%; cursor: col-resize; } .ihc-splitter-nonresizable>.ihc-splitbar { cursor: default; } .ihc-splitbar { position: relative; background-color: var(--ihc-splitter-color); } .ihc-splitbar-disabled { cursor: default; } .ihc-splitter-item { flex-basis: 0; overflow: hidden; transition: flex-basis 100ms linear; } .ihc-splitter-resizing>.ihc-splitter-item { will-change: flex-basis; transition-duration: 0ms; }