Skip to content

Commit d84ebc0

Browse files
segunadebayosegunadebayo
committed
docs(splitter): add more examples
1 parent a6c244b commit d84ebc0

File tree

15 files changed

+135
-19
lines changed

15 files changed

+135
-19
lines changed

‎packages/react/src/components/splitter/examples/collapsible.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Splitter } from '@ark-ui/react/splitter'
2+
3+
export const Collapsible = () => (
4+
<Splitter.Root
5+
defaultSize={[15, 20]}
6+
panels={[
7+
{ id: 'a', collapsible: true, collapsedSize: 5, minSize: 10, maxSize: 20 },
8+
{ id: 'b', minSize: 50 },
9+
]}
10+
>
11+
<Splitter.Panel id="a">A</Splitter.Panel>
12+
<Splitter.ResizeTrigger id="a:b" aria-label="Resize" />
13+
<Splitter.Panel id="b">B</Splitter.Panel>
14+
</Splitter.Root>
15+
)

‎packages/react/src/components/splitter/examples/multiple-panels.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Splitter } from '@ark-ui/react/splitter'
2+
3+
export const MultiplePanels = () => (
4+
<Splitter.Root
5+
panels={[
6+
{ id: 'a', minSize: 20 },
7+
{ id: 'b', minSize: 40 },
8+
{ id: 'c', minSize: 20 },
9+
]}
10+
defaultSize={[20, 60, 20]}
11+
>
12+
<Splitter.Panel id="a">A</Splitter.Panel>
13+
<Splitter.ResizeTrigger id="a:b" aria-label="Resize" />
14+
<Splitter.Panel id="b">B</Splitter.Panel>
15+
<Splitter.ResizeTrigger id="b:c" aria-label="Resize" />
16+
<Splitter.Panel id="c">C</Splitter.Panel>
17+
</Splitter.Root>
18+
)

‎packages/react/src/components/splitter/splitter.stories.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ const meta: Meta = {
77
export default meta
88

99
export { Basic } from './examples/basic'
10+
export { Collapsible } from './examples/collapsible'
1011
export { Events } from './examples/events'
12+
export { MultiplePanels } from './examples/multiple-panels'
1113
export { RenderProp } from './examples/render-prop'
1214
export { RootProvider } from './examples/root-provider'
1315
export { Vertical } from './examples/vertical'

‎packages/solid/src/components/splitter/examples/collapsible.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Splitter } from '@ark-ui/solid/splitter'
2+
3+
export const Collapsible = () => (
4+
<Splitter.Root
5+
defaultSize={[15, 20]}
6+
panels={[
7+
{ id: 'a', collapsible: true, collapsedSize: 5, minSize: 10, maxSize: 20 },
8+
{ id: 'b', minSize: 50 },
9+
]}
10+
>
11+
<Splitter.Panel id="a">A</Splitter.Panel>
12+
<Splitter.ResizeTrigger id="a:b" aria-label="Resize" />
13+
<Splitter.Panel id="b">B</Splitter.Panel>
14+
</Splitter.Root>
15+
)

‎packages/solid/src/components/splitter/examples/multiple-panels.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Splitter } from '@ark-ui/solid/splitter'
2+
3+
export const MultiplePanels = () => (
4+
<Splitter.Root
5+
panels={[
6+
{ id: 'a', minSize: 20 },
7+
{ id: 'b', minSize: 40 },
8+
{ id: 'c', minSize: 20 },
9+
]}
10+
defaultSize={[20, 60, 20]}
11+
>
12+
<Splitter.Panel id="a">A</Splitter.Panel>
13+
<Splitter.ResizeTrigger id="a:b" aria-label="Resize" />
14+
<Splitter.Panel id="b">B</Splitter.Panel>
15+
<Splitter.ResizeTrigger id="b:c" aria-label="Resize" />
16+
<Splitter.Panel id="c">C</Splitter.Panel>
17+
</Splitter.Root>
18+
)

‎packages/solid/src/components/splitter/splitter.stories.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ const meta: Meta = {
77
export default meta
88

99
export { Basic } from './examples/basic'
10+
export { Collapsible } from './examples/collapsible'
1011
export { Events } from './examples/events'
12+
export { MultiplePanels } from './examples/multiple-panels'
1113
export { RenderProp } from './examples/render-prop'
1214
export { RootProvider } from './examples/root-provider'
1315
export { Vertical } from './examples/vertical'

‎packages/vue/src/components/splitter/examples/basic.vue

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
<script setup lang="ts">
22
import { Splitter } from '@ark-ui/vue/splitter'
3-
import { ref } from 'vue'
4-
5-
const panels = ref([{ id: 'a' }, { id: 'b' }])
6-
const defaultSizes = ref([50, 50])
73
</script>
84

95
<template>
10-
<Splitter.Root :panels="panels" :defaultSizes="defaultSizes">
6+
<Splitter.Root :panels="[{ id: 'a' }, { id: 'b' }]">
117
<Splitter.Panel id="a">A</Splitter.Panel>
128
<Splitter.ResizeTrigger id="a:b" aria-label="Resize" />
139
<Splitter.Panel id="b">B</Splitter.Panel>

‎packages/vue/src/components/splitter/examples/collapsible.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script setup lang="ts">
2+
import { Splitter } from '@ark-ui/vue/splitter'
3+
</script>
4+
5+
<template>
6+
<Splitter.Root
7+
:default-size="[15, 20]"
8+
:panels="[
9+
{ id: 'a', collapsible: true, collapsedSize: 5, minSize: 10, maxSize: 20 },
10+
{ id: 'b', minSize: 50 },
11+
]"
12+
>
13+
<Splitter.Panel id="a">A</Splitter.Panel>
14+
<Splitter.ResizeTrigger id="a:b" aria-label="Resize" />
15+
<Splitter.Panel id="b">B</Splitter.Panel>
16+
</Splitter.Root>
17+
</template>

‎packages/vue/src/components/splitter/examples/events.vue

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
<script setup lang="ts">
22
import { Splitter } from '@ark-ui/vue/splitter'
3-
import { ref } from 'vue'
4-
5-
const panels = ref([{ id: 'a' }, { id: 'b' }])
63
</script>
74

85
<template>
96
<Splitter.Root
10-
:panels="panels"
7+
:panels="[{ id: 'a' }, { id: 'b' }]"
118
@resize="(details) => console.log('onResize', details)"
129
@resize-start="() => console.log('onResizeStart')"
1310
@resize-end="(details) => console.log('onResizeEnd', details)"

‎packages/vue/src/components/splitter/examples/multiple-panels.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup lang="ts">
2+
import { Splitter } from '@ark-ui/vue/splitter'
3+
</script>
4+
5+
<template>
6+
<Splitter.Root
7+
:panels="[
8+
{ id: 'a', minSize: 20 },
9+
{ id: 'b', minSize: 40 },
10+
{ id: 'c', minSize: 20 },
11+
]"
12+
:default-size="[20, 60, 20]"
13+
>
14+
<Splitter.Panel id="a">A</Splitter.Panel>
15+
<Splitter.ResizeTrigger id="a:b" aria-label="Resize" />
16+
<Splitter.Panel id="b">B</Splitter.Panel>
17+
<Splitter.ResizeTrigger id="b:c" aria-label="Resize" />
18+
<Splitter.Panel id="c">C</Splitter.Panel>
19+
</Splitter.Root>
20+
</template>

0 commit comments

Comments
 (0)