-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsplitters.html
62 lines (57 loc) · 13.2 KB
/
splitters.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en" class="light-mode">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./favicon.png" />
<link rel="stylesheet" type="text/css" href="./site.css" />
<meta name="viewport" content="width=device-width" />
<link href="./_app/immutable/assets/3.84abd576.css" rel="stylesheet">
<link href="./_app/immutable/assets/sterling.ba12fde9.css" rel="stylesheet">
<link href="./_app/immutable/assets/Header.9b742ac5.css" rel="stylesheet">
<link href="./_app/immutable/assets/11.0362a518.css" rel="stylesheet">
<link href="./_app/immutable/assets/Link.202292e5.css" rel="stylesheet">
<link href="./_app/immutable/assets/Post.a1c147c5.css" rel="stylesheet">
<link rel="modulepreload" href="./_app/immutable/entry/start.2c55a661.js">
<link rel="modulepreload" href="./_app/immutable/chunks/scheduler.75f5293f.js">
<link rel="modulepreload" href="./_app/immutable/chunks/singletons.74c6a932.js">
<link rel="modulepreload" href="./_app/immutable/chunks/paths.21152387.js">
<link rel="modulepreload" href="./_app/immutable/entry/app.4df5770f.js">
<link rel="modulepreload" href="./_app/immutable/chunks/index.36074062.js">
<link rel="modulepreload" href="./_app/immutable/nodes/0.1375ff03.js">
<link rel="modulepreload" href="./_app/immutable/nodes/3.b744dd68.js">
<link rel="modulepreload" href="./_app/immutable/chunks/each.e59479a4.js">
<link rel="modulepreload" href="./_app/immutable/chunks/spread.8a54911c.js">
<link rel="modulepreload" href="./_app/immutable/chunks/Button.fb729d6d.js">
<link rel="modulepreload" href="./_app/immutable/chunks/Header.5ff96dfd.js">
<link rel="modulepreload" href="./_app/immutable/nodes/11.ced93d5c.js">
<link rel="modulepreload" href="./_app/immutable/chunks/Link.94f51915.js">
<link rel="modulepreload" href="./_app/immutable/chunks/NpmIcon.b54d2cdc.js">
<link rel="modulepreload" href="./_app/immutable/chunks/Post.19bcd7ab.js">
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents"> <div class="root"><div class="header svelte-7d51k5"><a href="/" class="svelte-7d51k5" data-svelte-h="svelte-bk6u5r">geoffcox.github.io</a><span class="logo svelte-7d51k5" role="button" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 1024 1024" version="1.1" class="rooster"><path d="M940.1 335.3c11.3 0 20.4 9.1 20.4 20.4 0 11.3-9.1 20.4-20.4 20.4h-77.2v106.5c0 166.2-115.8 305.9-270.9 342.7v81.8h27.3c11.3 0 20.4 9.1 20.4 20.4 0 11.3-9.1 20.4-20.4 20.4H415.2c-11.3 0-20.4-9.1-20.4-20.4 0-11.3 9.1-20.4 20.4-20.4h57.2v-74.4C308.5 814.8 178 684.2 160.5 520.3h-8.2c-24.4 0-45.3-19.1-48.5-44.3-0.1-0.8-0.2-1.6-0.2-2.4V412c-10.8-5.1-20.9-11.4-30.2-19-6.9-5.6-10.9-14-10.9-22.9 0-8.8 3.9-17.1 10.7-22.8 24.7-20.4 55.3-32 87.2-33.2 3.8-24.4 13.5-47.2 28.3-66.9-17.2-11.6-28.6-31.4-28.6-53.7 0-35.7 29-64.7 64.7-64.7 10.1-30.1 38.6-51.9 72-51.9 41.8 0 75.8 34 75.8 75.8 0 16-5.1 31-13.8 43.4 58 20.7 99.7 76.2 99.7 141.3v103.2h243c66.5 0 120.6-38 120.7-84.8v-97.6c0-11.3 9.1-20.4 20.4-20.4 11.3 0 20.4 9.1 20.4 20.4v48.3l34.1-34.1c8-7.9 20.9-7.9 28.8 0 8 8 8 20.9 0 28.8l-34.1 34.1h48.3z" fill="#663333"></path><path d="M822.2 439.3v43.2c0 171.7-139.7 311.5-311.4 311.5-169 0-311.5-140.1-311.5-311.5v-1.1h38.3c11.3 0 20.4-9.1 20.4-20.4 0-11.3-9.1-20.4-20.4-20.4h-38.3v-23.1c16.2-10.5 24.7-28.9 24.8-47.1 0.1-18.1-8-36.5-23.9-47.2 3-23.9 13.8-45.9 31.1-63.2 20.6-20.6 48.1-32 77.2-32 60.2 0 109.3 49 109.3 109.2v103.2h-82.1c-11.3 0-20.4 9.1-20.4 20.4 0 11.3 9.1 20.4 20.4 20.4h365.8c42.1 0 81.8-12.4 111.9-34.9 3.1-2.2 6-4.5 8.8-7z" fill="#F9DCB2"></path><path d="M706.5 521.2c17 39.4-1.1 85.2-40.5 102.3-9.8 4.3-20.4 6.4-30.9 6.4-2.5 0-5-0.1-7.5-0.4-16 56.8-68.3 98.4-129.9 98.4-0.7 0-134 1.9-134-137.3 0-11.3 9.5-20.3 20.7-20.1 11.3 0.2 20.2 9.4 20.1 20.7-0.8 51.9 40.8 94.9 92.7 95.7 0.5 0 0 0.2 0.5 0.2 51.3 0 93.4-41.3 94.2-92.7 0.2-11.3 9.5-20.2 20.7-20.1 9.2 0.2 16.8 6.3 19.2 14.7 6.1 0.5 12.2-0.4 18-2.9 18.8-8.1 27.4-29.9 19.3-48.7-4.5-10.3 0.3-22.3 10.6-26.8 10.4-4.5 22.4 0.3 26.8 10.6z" fill="#663333"></path><path d="M331.9 152.7c0 17.3-12.9 32.2-29.9 34.7-0.2 0-41.1-1.1-82.7 29.4-10.5-2.5-18.4-12-18.4-23.3 0-13.2 10.7-24 24-24 3.1 0 6.1 0.6 8.9 1.7 6.3 2.5 13.4 1.8 19-2s9-10 9-16.8c0.1-19.2 15.9-34.8 35.1-34.8 19.2 0 35 15.7 35 35.1z" fill="#FE6865"></path><path d="M283.2 291.1c11.3 0 20.4 9.1 20.4 20.4 0 11.3-9.1 20.4-20.4 20.4-11.3 0-20.4-9.1-20.4-20.4 0-11.3 9.1-20.4 20.4-20.4z" fill="#663333"></path><path d="M168.5 354.7c13.8 0.3 14.8 12 14.8 15.5-0.1 13.6-10.4 15.2-14.9 15.2-20.3 0.2-40-5.2-57.1-15.5 17.1-10.3 37-15.7 57.2-15.2z" fill="#FFCC66"></path><path d="M158.5 426v57.6h-6.2c-5.6 0-10.8-4.9-12-11.4v-48.4c6 1.1 12.1 1.8 18.2 2.2z" fill="#FE6865"></path><path d="M551.3 907.1v-74.7c-12.5 1.4-25.3 2.2-38.1 2.3V907h38.1z" fill="#FFFFFF"></path></svg></span> </div> <div class="content-container svelte-5oz901"> <div class="split svelte-5oz901"><div class="nav svelte-5oz901"><div class="nav-header svelte-5oz901" role="separator"></div> <a href="./resume" class="svelte-5oz901">Geoff's Resume</a><div class="nav-header svelte-5oz901" role="separator">Open Source</div> <a href="./binary-search" class="svelte-5oz901">binary-search</a><a href="./recoil-examples" class="svelte-5oz901">recoil-examples</a><a href="./splitters" class="svelte-5oz901">react-splitter / svelte-splitter</a><a href="./sterling-svelte" class="svelte-5oz901">sterling-svelte</a><a href="./trie-search" class="svelte-5oz901">trie-search</a><div class="nav-header svelte-5oz901" role="separator">Opinion</div> <a href="./why-i-love-svelte" class="svelte-5oz901">Why I love Svelte</a><div class="nav-header svelte-5oz901" role="separator">Stories</div> <a href="./unpredictable-users" class="svelte-5oz901">Unpredictable users</a><a href="./speed-estimation" class="svelte-5oz901">Speed Estimation</a><div class="nav-header svelte-5oz901" role="separator">Bookshelf</div> <a href="./software-architecture-books" class="svelte-5oz901">Software Architecture Books</a></div> <div class="content svelte-5oz901"><div class="post svelte-nmvp7s"><div class="category svelte-nmvp7s">Open Source Library</div> <div class="headline svelte-nmvp7s"><a href="splitters" class="svelte-nmvp7s">react-splitter & svelte-splitter</a></div> <div class="content-section svelte-nmvp7s"><div class="container svelte-nmvp7s"><div class="content"><p data-svelte-h="svelte-1yi6931">A splitter control allows the user to resize 2 different panes relative to each other. Splitters
can be nested to create sophisticated application layouts.</p> <p data-svelte-h="svelte-18evio7">The splitter is available for React and Svelte. Each is responsive, robust, and easy to use.</p> <div class="link-grid svelte-if7hsg"><div class="link-header svelte-if7hsg" data-svelte-h="svelte-1bhb7kk">react-splitter</div> <div class="link-header svelte-if7hsg" data-svelte-h="svelte-1imt6ig">svelte-splitter</div> <div class="links svelte-if7hsg"><div class="link svelte-j5c9xl"><a href="https://github.com/GeoffCox/react-splitter" target="_blank" class="svelte-j5c9xl"><svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="-3 -3 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2ZM0 12C0 5.3726 5.3726 0 12 0C18.6274 0 24 5.3726 24 12C24 18.6274 18.6274 24 12 24C5.3726 24 0 18.6274 0 12Z" fill="rgba(0,0,0,0.7)" stroke="none"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9.59162 22.7357C9.49492 22.6109 9.49492 21.4986 9.59162 19.399C8.55572 19.4347 7.90122 19.3628 7.62812 19.1833C7.21852 18.9139 6.80842 18.0833 6.44457 17.4979C6.08072 16.9125 5.27312 16.8199 4.94702 16.6891C4.62091 16.5582 4.53905 16.0247 5.84562 16.4282C7.15222 16.8316 7.21592 17.9303 7.62812 18.1872C8.04032 18.4441 9.02572 18.3317 9.47242 18.1259C9.91907 17.9201 9.88622 17.1538 9.96587 16.8503C10.0666 16.5669 9.71162 16.5041 9.70382 16.5018C9.26777 16.5018 6.97697 16.0036 6.34772 13.7852C5.71852 11.5669 6.52907 10.117 6.96147 9.49369C7.24972 9.07814 7.22422 8.19254 6.88497 6.83679C8.11677 6.67939 9.06732 7.06709 9.73672 7.99999C9.73737 8.00534 10.6143 7.47854 12.0001 7.47854C13.386 7.47854 13.8777 7.90764 14.2571 7.99999C14.6365 8.09234 14.94 6.36699 17.2834 6.83679C16.7942 7.79839 16.3844 8.99999 16.6972 9.49369C17.0099 9.98739 18.2372 11.5573 17.4833 13.7852C16.9807 15.2706 15.9927 16.1761 14.5192 16.5018C14.3502 16.5557 14.2658 16.6427 14.2658 16.7627C14.2658 16.9427 14.4942 16.9624 14.8233 17.8058C15.0426 18.368 15.0585 19.9739 14.8708 22.6234C14.3953 22.7445 14.0254 22.8257 13.7611 22.8673C13.2924 22.9409 12.7835 22.9822 12.2834 22.9982C11.7834 23.0141 11.6098 23.0123 10.9185 22.948C10.4577 22.9051 10.0154 22.8343 9.59162 22.7357Z" fill="rgba(0,0,0,0.7)" stroke="none"></path></svg></a> </div> <div class="link svelte-j5c9xl"><a href="https://geoffcox.github.io/demos/react-splitter/" target="_blank" class="svelte-j5c9xl"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24px" height="24px" viewBox="0 0 16 16"><path d="M8 0a.5.5 0 0 1 .473.337L9.046 2H14a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1.85l1.323 3.837a.5.5 0 1 1-.946.326L11.092 11H8.5v3a.5.5 0 0 1-1 0v-3H4.908l-1.435 4.163a.5.5 0 1 1-.946-.326L3.85 11H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h4.954L7.527.337A.5.5 0 0 1 8 0zM2 3v7h12V3H2z"></path></svg></a> </div> <div class="link svelte-j5c9xl"><a href="https://www.npmjs.com/package/@geoffcox/react-splitter" target="_blank" class="svelte-j5c9xl"><svg xmlns="http://www.w3.org/2000/svg" fill="#000000" width="30px" height="30px" viewBox="0 0 24 24"><path d="m12 12.534v-2.663h-1.334v2.666zm12-5.334h-24v8h6.666v1.334h5.334v-1.333h12zm-17.334 1.334v5.337h-1.333v-4h-1.334v4h-2.666v-5.334zm6.667 0v5.337h-2.666v1.334h-2.666v-6.666zm9.333 0v5.337h-1.333v-4h-1.334v4h-1.334v-4h-1.333v4h-2.667v-5.334z"></path></svg> </a> </div></div> <div class="links svelte-if7hsg"><div class="link svelte-j5c9xl"><a href="https://github.com/GeoffCox/sterling-splitter" target="_blank" class="svelte-j5c9xl"><svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="-3 -3 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2ZM0 12C0 5.3726 5.3726 0 12 0C18.6274 0 24 5.3726 24 12C24 18.6274 18.6274 24 12 24C5.3726 24 0 18.6274 0 12Z" fill="rgba(0,0,0,0.7)" stroke="none"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9.59162 22.7357C9.49492 22.6109 9.49492 21.4986 9.59162 19.399C8.55572 19.4347 7.90122 19.3628 7.62812 19.1833C7.21852 18.9139 6.80842 18.0833 6.44457 17.4979C6.08072 16.9125 5.27312 16.8199 4.94702 16.6891C4.62091 16.5582 4.53905 16.0247 5.84562 16.4282C7.15222 16.8316 7.21592 17.9303 7.62812 18.1872C8.04032 18.4441 9.02572 18.3317 9.47242 18.1259C9.91907 17.9201 9.88622 17.1538 9.96587 16.8503C10.0666 16.5669 9.71162 16.5041 9.70382 16.5018C9.26777 16.5018 6.97697 16.0036 6.34772 13.7852C5.71852 11.5669 6.52907 10.117 6.96147 9.49369C7.24972 9.07814 7.22422 8.19254 6.88497 6.83679C8.11677 6.67939 9.06732 7.06709 9.73672 7.99999C9.73737 8.00534 10.6143 7.47854 12.0001 7.47854C13.386 7.47854 13.8777 7.90764 14.2571 7.99999C14.6365 8.09234 14.94 6.36699 17.2834 6.83679C16.7942 7.79839 16.3844 8.99999 16.6972 9.49369C17.0099 9.98739 18.2372 11.5573 17.4833 13.7852C16.9807 15.2706 15.9927 16.1761 14.5192 16.5018C14.3502 16.5557 14.2658 16.6427 14.2658 16.7627C14.2658 16.9427 14.4942 16.9624 14.8233 17.8058C15.0426 18.368 15.0585 19.9739 14.8708 22.6234C14.3953 22.7445 14.0254 22.8257 13.7611 22.8673C13.2924 22.9409 12.7835 22.9822 12.2834 22.9982C11.7834 23.0141 11.6098 23.0123 10.9185 22.948C10.4577 22.9051 10.0154 22.8343 9.59162 22.7357Z" fill="rgba(0,0,0,0.7)" stroke="none"></path></svg></a> </div> <div class="link svelte-j5c9xl"><a href="https://geoffcox.github.io/demos/sterling-splitter/" target="_blank" class="svelte-j5c9xl"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24px" height="24px" viewBox="0 0 16 16"><path d="M8 0a.5.5 0 0 1 .473.337L9.046 2H14a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1.85l1.323 3.837a.5.5 0 1 1-.946.326L11.092 11H8.5v3a.5.5 0 0 1-1 0v-3H4.908l-1.435 4.163a.5.5 0 1 1-.946-.326L3.85 11H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h4.954L7.527.337A.5.5 0 0 1 8 0zM2 3v7h12V3H2z"></path></svg></a> </div> <div class="link svelte-j5c9xl"><a href="https://www.npmjs.com/package/@geoffcox/sterling-splitter" target="_blank" class="svelte-j5c9xl"><svg xmlns="http://www.w3.org/2000/svg" fill="#000000" width="30px" height="30px" viewBox="0 0 24 24"><path d="m12 12.534v-2.663h-1.334v2.666zm12-5.334h-24v8h6.666v1.334h5.334v-1.333h12zm-17.334 1.334v5.337h-1.333v-4h-1.334v4h-2.666v-5.334zm6.667 0v5.337h-2.666v1.334h-2.666v-6.666zm9.333 0v5.337h-1.333v-4h-1.334v4h-1.334v-4h-1.333v4h-2.667v-5.334z"></path></svg> </a> </div></div></div></div></div> </div> </div></div></div></div> </div>
<script>
{
__sveltekit_1cy0fcu = {
base: new URL(".", location).pathname.slice(0, -1),
env: {}
};
const element = document.currentScript.parentElement;
const data = [null,null,null];
Promise.all([
import("./_app/immutable/entry/start.2c55a661.js"),
import("./_app/immutable/entry/app.4df5770f.js")
]).then(([kit, app]) => {
kit.start(app, element, {
node_ids: [0, 3, 11],
data,
form: null,
error: null
});
});
}
</script>
</div>
</body>
</html>