Park UI

Usage

orientation

import * as Splitter from '~/components/ui/splitter'

export const Demo = (props: Splitter.RootProps) => {
  return (
    <Splitter.Root
      size={[
        { id: 'a', size: 50 },
        { id: 'b', size: 50 },
      ]}
      {...props}
    >
      <Splitter.Panel id="a">A</Splitter.Panel>
      <Splitter.ResizeTrigger id="a:b" />
      <Splitter.Panel id="b">B</Splitter.Panel>
    </Splitter.Root>
  )
}

Installation

Insert code snippet into your project. Update import paths as needed.

import { Splitter } from '@ark-ui/react/splitter'
import type { ComponentProps } from 'react'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'

const styles = tv(
  {
    base: 'splitter',
    slots: {
      root: 'splitter__root',
      panel: 'splitter__panel',
      resizeTrigger: 'splitter__resizeTrigger',
    },
    variants: {},
  },
  { twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)

export const Root = withProvider(Splitter.Root, 'root')
export const Panel = withContext(Splitter.Panel, 'panel')
export const ResizeTrigger = withContext(Splitter.ResizeTrigger, 'resizeTrigger')

export type RootProps = ComponentProps<typeof Root>
export interface PanelProps extends ComponentProps<typeof Panel> {}
export interface ResizeTriggerProps extends ComponentProps<typeof ResizeTrigger> {}

import { Splitter } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'

const styles = tv(
  {
    base: 'splitter',
    slots: {
      root: 'splitter__root',
      panel: 'splitter__panel',
      resizeTrigger: 'splitter__resizeTrigger',
    },
    variants: {},
  },
  { twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)

export const Root = withProvider(Splitter.Root, 'root')
export const Panel = withContext(Splitter.Panel, 'panel')
export const ResizeTrigger = withContext(Splitter.ResizeTrigger, 'resizeTrigger')

export type RootProps = ComponentProps<typeof Root>
export interface PanelProps extends ComponentProps<typeof Panel> {}
export interface ResizeTriggerProps extends ComponentProps<typeof ResizeTrigger> {}

Not yet available