Svelte Split Pane
A <SplitPane> component
Overview:
The svelte-split-pane is a component that allows for splitting panes in either a horizontal or vertical orientation. It provides options for setting the type, id, min/max size, position, color, and thickness of the divider between panes.
Features:
- Type: Specifies whether the panes are split left-right (horizontal) or top-bottom (vertical).
- Id: Adds a data-pane={id} attribute to the element, allowing for custom CSS styling.
- Min/Max Size: Sets the minimum and maximum size of the panes as a percentage, pixels, em, or rem.
- Position: Determines the initial position of the divider, measured from the left/top or right/bottom.
- Priority: Resolves conflicts between min and max constraints to determine which constraint takes precedence.
- Color: Specifies the color of the divider between panes, with a default value of transparent.
- Thickness: Determines the thickness of the 'hit area' for the divider, with a default value of 8px.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
