svelte-splitpanes
Advanced tools
Comparing version
{ | ||
"name": "svelte-splitpanes", | ||
"version": "0.6.0", | ||
"version": "0.6.1", | ||
"description": "A full featured resizable pane layout splitter, ported from vue-splitpanes", | ||
@@ -16,2 +16,3 @@ "author": { | ||
"pane", | ||
"panel", | ||
"resize", | ||
@@ -36,3 +37,2 @@ "resizable" | ||
"eslint-plugin-svelte3": "^3.4.1", | ||
"nanoid": "^3.3.2", | ||
"prettier": "^2.6.2", | ||
@@ -56,2 +56,3 @@ "prettier-plugin-svelte": "^2.7.0", | ||
"./Splitpanes.svelte": "./Splitpanes.svelte", | ||
"./browserNanoid": "./browserNanoid.js", | ||
".": "./index.js" | ||
@@ -58,0 +59,0 @@ }, |
@@ -86,3 +86,35 @@ # Svelte-Splitpanes | ||
```css | ||
TODO | ||
/* The followinf classes can be used to style the splitter, see demos*/ | ||
.splitpanes { | ||
background-color: #f8f8f8; | ||
} | ||
.splitpanes__splitter { | ||
background-color: #ccc; | ||
position: relative; | ||
} | ||
.splitpanes__splitter:before { | ||
content: ''; | ||
position: absolute; | ||
left: 0; | ||
top: 0; | ||
transition: opacity 0.4s; | ||
background-color: rgba(255, 0, 0, 0.3); | ||
opacity: 0; | ||
z-index: 1; | ||
} | ||
.splitpanes__splitter:hover:before { | ||
opacity: 1; | ||
} | ||
.splitpanes--vertical > .splitpanes__splitter:before { | ||
left: -30px; | ||
right: -30px; | ||
height: 100%; | ||
} | ||
.splitpanes--horizontal > .splitpanes__splitter:before { | ||
top: -30px; | ||
bottom: -30px; | ||
width: 100%; | ||
} | ||
``` | ||
@@ -89,0 +121,0 @@ |
Sorry, the diff of this file is not supported yet
38325
3.25%20
-4.76%10
25%99
22.22%142
29.09%