Simple and minimal split pane component for Solid!

Overview

solid-split-pane

Split pane component for Solid! Uses Split.Js under the hood. Takes all props that split.js takes, plus a gutterClass.

(Q) Why not solid-split or solid-split-component?

solid-split contains a custom split implementation that has much less features. solid-split-component's internals seemed rather complicated for what seems to be a simple problem. I just wanted to publish my solution, which is just a lightweight wrapper over Split.Js.

Usage

npm i solid-split-pane
import { SplitPane } from "solid-split-pane";

export const App = () => (
  <div style="display: flex">
    <SplitPane>
      <div>
        <p>Container 1</p>
      </div>
      <div>
        <p>Container 2</p>
      </div>
    </SplitPane>
  </div>;
);

Options

Any options that Split.JS takes. Gutter class is customizeable through a gutterClass prop!

You might also like...

Unopinionated utilities for resizeable split views

Split Unopinionated utilities for resizeable split views. Zero Deps Tiny: Each is between 1-2kb gzipped. Fast: No overhead or attached window event li

Dec 24, 2022

🏏 GitHub action to split your Git release tag into SemVer 2.0 parts

🏏 Git Tag Action GitHub action to split your Git release tag into SemVer 2.0 parts This is a simple action to split your git tag, usually for release

Oct 31, 2022

Split bills between friends ;)

Split bills between friends ;)

SplitWise - FindCoder.io Hackathon Submission Full stack application to split bills among friends ;) Frontend : https://tripsplits.netlify.app/registe

Dec 25, 2022

hCaptcha Component Library for Solid.

Solid hCaptcha Component Library This is a port of @hcaptcha/react-hcaptcha for Solid. Description hCaptcha is a drop-replacement for reCAPTCHA that p

Dec 4, 2022

👇 Bread n butter utility for component-tied mouse/touch gestures in Solid.

👇 Bread n butter utility for component-tied mouse/touch gestures in Solid.

solid-gesture solid-gesture is a port of @use-gesture/react which lets you bind richer mouse and touch events to any component or view. With the data

Sep 30, 2022

UI component library for Solid.js with SSR support

Dolmen Dolmen is a themeable UI component library designed to work with Solid.js and optimized for SSR (Server-side rendering). It provides a broad se

Dec 17, 2022

đŸ”„ Set up your new Solid component library in seconds!

Create Solid Library Create SolidJS libraries with ease! Usage npx create-solid-library name Development Developing components is often a visual pro

Oct 28, 2022

Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics.

Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.

Jan 29, 2022

Simple Solid primitive unit test utility.

solid-primitive-test-util Simple Solid primitive unit test utility. Install pnpm add solid-primitive-test-util -D Example Basic Usage Let's say we hav

Mar 21, 2022
Owner
blusk
Rust / Go / TypeScript (React,Vue,Solid,etc.) / C++
blusk
A SolidJS starter template with solid-labels, solid-sfc and solid-styled

solid-sfc-styled-labels-starter This is a SolidJS starter template for easily setting up solid-sfc, solid-styled and solid-labels. Development Install

Alexis H. Munsayac 9 Mar 25, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till mÀnniskor pÄ flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A refined tool for exploring open-source projects on GitHub with a file tree, rich Markdown and image previews, multi-pane multi-tab layouts and first-class support for Ink syntax highlighting.

Ink codebase browser, "Kin" ?? The Ink codebase browser is a tool to explore open-source code on GitHub, especially my side projects written in the In

Linus Lee 20 Oct 30, 2022
Easily open daily notes and periodic notes in new pane; customize periodic notes background; quick append new line to daily notes.

Obsidian daily notes opener This plugin adds a command for opening daily notes in a new pane (so that a keyboard shortcut could be used!) and gives ex

Xiao Meng 16 Dec 26, 2022
An Obsidian plugin to add (prepend or append) specified content to a note (existing or new) without opening another pane.

Obsidian Note Content Pusher An Obsidian plugin to add (prepend or append) specified content to a note (existing or new) without opening another pane.

Henry Gustafson 21 Nov 6, 2022
An Obsidian Plugin that allows to export tables from a pane in reading mode to CSV files.

Obsidian Plugin "Table to CSV Exporter" This is my very first attempt in writing a plugin for Obsidian. I didn't even know TypeScript before (but Java

Stefan Wolfrum 26 Dec 27, 2022
BCash is an app to help you keep track of who you owe and who owes you money in an easy way. Split your tabs and more.

BCash BCash is an app to help you keep track of who you owe and who owes you money in an easy way. Split your tabs and more. Routes for develpment: lo

Cuitlahuac Maldonado 3 Aug 11, 2022
Solid component and library for LiveKit (unofficial)

This package provides Solid components that makes it easier to use LiveKit in a Solid app. Inspired completely by https://github.com/livekit/livekit-r

Prince Neil Cedrick Castro 6 Mar 8, 2022