CodeConnect Design System

Stack

要素を縦または横に並べるレイアウトコンポーネント。flexboxベースで、一貫した間隔と配置を簡単に実現できます。

基本的な使い方

デフォルトは縦方向（vertical）の配置です。

Preview

Direction（方向）

direction propで配置方向を変更できます。

Vertical（縦方向）

Preview

Horizontal（横方向）

Preview

Spacing（間隔）

8段階の間隔サイズを提供します。

Preview

Align（交差軸の配置）

align propで交差軸方向の配置を制御します。

Preview

Justify（主軸の配置）

justify propで主軸方向の配置を制御します。

Preview

Wrap（折り返し）

wrap propで要素の折り返しを制御します。

Preview

Props

PropTypeDefaultDescription
direction'vertical' | 'horizontal''vertical'配置方向
spacing'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl''md'要素間の間隔
align'start' | 'center' | 'end' | 'stretch''stretch'交差軸の配置
justify'start' | 'center' | 'end' | 'space-between' | 'space-around''start'主軸の配置
wrapbooleanfalse折り返しを有効にする
classNamestring-追加のCSSクラス

使用例

フォームレイアウト:

import { Stack, FormControl, Input, Button } from '@codeconnect-llc/design-system'


export function LoginForm() {
  return (
    <form>
      <Stack spacing="lg">
        <FormControl label="メールアドレス" htmlFor="email" required>
          <Input id="email" type="email" />
        </FormControl>


        <FormControl label="パスワード" htmlFor="password" required>
          <Input id="password" type="password" />
        </FormControl>


        <Stack direction="horizontal" spacing="md" justify="end">
          <Button variant="outline">キャンセル</Button>
          <Button variant="primary" type="submit">ログイン</Button>
        </Stack>
      </Stack>
    </form>
  )
}

ナビゲーションバー:

import { Stack, Button } from '@codeconnect-llc/design-system'


export function Navigation() {
  return (
    <Stack direction="horizontal" spacing="md" justify="space-between" align="center">
      <div className="text-xl font-bold">Logo</div>
      <Stack direction="horizontal" spacing="sm">
        <Button variant="ghost">Home</Button>
        <Button variant="ghost">About</Button>
        <Button variant="ghost">Contact</Button>
      </Stack>
    </Stack>
  )
}

グリッド風レイアウト:

import { Stack, Box } from '@codeconnect-llc/design-system'


export function Grid() {
  return (
    <Stack direction="horizontal" spacing="md" wrap>
      {Array.from({ length: 12 }).map((_, i) => (
        <Box
          key={i}
          padding="lg"
          borderRadius="md"
          style={{
            backgroundColor: 'var(--color-bg-secondary)',
            minWidth: '200px'
          }}
        >
          Item {i + 1}
        </Box>
      ))}
    </Stack>
  )
}