Panel

Provides panel functionality that encompasses components.

The panel has a layout specification, the default value is container. and in the case of a container layout, the panel component can specify all the attributes of the container component.

Basic

Basic Panel

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return (
        <Panel title="Basic Panel">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Panel>
    )
}

Closable

Closable Panel

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return (
        <Panel 
            title="Closable Panel"
            closeable
            closeFn={() => {
                alert('Close button clicked')
            }}
        >
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Panel>
    )
}

Collapsible

Basic Panel

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return (
        <Panel title="Basic Panel" collapsible>
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Panel>
    )
}