Container

Provides container functionality for layout placement of components.

Basic

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

export function ButtonDemo() {
    return (
        <Container>
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Horizontal

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

export function ButtonDemo() {
    return (
        <Container direction="horizontal">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Gap

Horizontal

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="horizontal">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Vertical

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

export function ButtonDemo() {
    return (
        <Container gap={4}>
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Align

Horizontal Left

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="horizontal" align="left">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Horizontal Center

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="horizontal" align="center">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Horizontal Right

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="horizontal" align="right">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Vertical Left

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

export function ButtonDemo() {
    return (
        <Container>
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Vertical Center

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

export function ButtonDemo() {
    return (
        <Container>
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Vertical Right

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

export function ButtonDemo() {
    return (
        <Container>
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Valign

Horizontal Top

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="horizontal" valign="top">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Horizontal Center

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="horizontal" valign="center">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Horizontal Bottom

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="horizontal" valign="bottom">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Vertical Top

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="vertical" valign="top">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Vertical Center

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="vertical" valign="center">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Vertical Bottom

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="vertical" valign="bottom">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Align Valign

Of course, it is also possible to use a combination of align and valign.

Vertical Right Top

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="vertical" align="right" valign="top">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Vertical Right Center

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="vertical" align="right" valign="center">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}

Vertical Right Bottom

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

export function ButtonDemo() {
    return (
        <Container gap={4} direction="vertical" align="right" valign="bottom">
            <Button>Button A</Button>
            <Button>Button B</Button>
            <Button>Button C</Button>
        </Container>
    )
}