@bgoodman/split-pane
Advanced tools
Custom element wrapper for [split.js](https://split.js.org/).
Custom element wrapper for split.js.
npm install @bgoodman/split-pane
yarn add @bgoodman/split-pane
<!DOCTYPE html>
<html>
<head>
<title>split-pane</title>
<script type="module" src="./dist/index.js"></script>
</head>
<body>
<split-pane>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</split-pane>
</body>
</html>
directionSpecify the direction of movement of the pane gutter.
"horizontal" (default)"vertical"pane-sizeAn array containing the values of the variable width(height) for horizontal(vertical) configuations. Value is a percentage of the overall size of the element. Default size for each of n child panes is 100/n. Reflected by property currentPaneSize.
keyAn identifier which if provided, enables the element's state to persist using window.localStorage to hold the value of pane-size.
resetPaneSizeResets the property currentPaneSize to the initial value of pane-size.
FAQs
Custom element wrapper for [split.js](https://split.js.org/).
We found that @bgoodman/split-pane demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Two npm packages masquerading as WhatsApp developer libraries include a kill switch that deletes all files if the phone number isn’t whitelisted.
Research
/Security News
Socket uncovered 11 malicious Go packages using obfuscated loaders to fetch and execute second-stage payloads via C2 domains.
Security News
TC39 advances 11 JavaScript proposals, with two moving to Stage 4, bringing better math, binary APIs, and more features one step closer to the ECMAScript spec.