CodeConnect Design System

Divider

コンテンツを視覚的に区切る仕切り線コンポーネント。セクションやグループの境界を明確にします。

基本的な使い方

Preview

方向

Horizontal（横方向・デフォルト）

Preview

Vertical（縦方向）

Preview

バリアント

Solid（実線・デフォルト）

Preview

Dashed（破線）

Preview

間隔

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

Small

Preview

Medium（デフォルト）

Preview

Large

Preview

縦方向の間隔

Preview

組み合わせ例

Preview

Props

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'仕切り線の方向
variant'solid' | 'dashed''solid'線のスタイル
spacing'sm' | 'md' | 'lg''md'仕切り線の前後の間隔
classNamestring-追加のCSSクラス

使用例

セクション区切り:

import { Divider } from '@codeconnect-llc/design-system'


export function Article() {
  return (
    <article>
      <section>
        <h2>はじめに</h2>
        <p>本文...</p>
      </section>


      <Divider spacing="lg" />


      <section>
        <h2>本論</h2>
        <p>本文...</p>
      </section>


      <Divider spacing="lg" />


      <section>
        <h2>まとめ</h2>
        <p>本文...</p>
      </section>
    </article>
  )
}

リスト項目の区切り:

import { Divider } from '@codeconnect-llc/design-system'


export function MenuList({ items }) {
  return (
    <div className="bg-white rounded-lg shadow">
      {items.map((item, index) => (
        <>
          <div key={item.id} className="p-4 hover:bg-gray-50">
            <h3 className="font-semibold">{item.title}</h3>
            <p className="text-sm text-gray-600">{item.description}</p>
          </div>
          {index < items.length - 1 && <Divider spacing="sm" />}
        </>
      ))}
    </div>
  )
}

カードのセクション:

import { Divider } from '@codeconnect-llc/design-system'


export function ProfileCard({ user }) {
  return (
    <div className="border rounded-lg p-6 space-y-4">
      <div>
        <h2 className="text-xl font-bold">{user.name}</h2>
        <p className="text-gray-600">{user.role}</p>
      </div>


      <Divider />


      <div>
        <h3 className="font-semibold mb-2">連絡先</h3>
        <p>{user.email}</p>
        <p>{user.phone}</p>
      </div>


      <Divider />


      <div>
        <h3 className="font-semibold mb-2">住所</h3>
        <p>{user.address}</p>
      </div>
    </div>
  )
}

ナビゲーションメニュー:

import { Divider } from '@codeconnect-llc/design-system'


export function Sidebar() {
  return (
    <aside className="w-64 bg-white border-r">
      <nav className="p-4">
        <div className="space-y-2">
          <a href="/dashboard" className="block p-2 hover:bg-gray-100 rounded">
            ダッシュボード
          </a>
          <a href="/projects" className="block p-2 hover:bg-gray-100 rounded">
            プロジェクト
          </a>
          <a href="/tasks" className="block p-2 hover:bg-gray-100 rounded">
            タスク
          </a>
        </div>


        <Divider spacing="md" />


        <div className="space-y-2">
          <a href="/settings" className="block p-2 hover:bg-gray-100 rounded">
            設定
          </a>
          <a href="/help" className="block p-2 hover:bg-gray-100 rounded">
            ヘルプ
          </a>
        </div>
      </nav>
    </aside>
  )
}

フォームグループの区切り:

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


export function ProfileForm() {
  return (
    <form className="space-y-6">
      <div>
        <h3 className="text-lg font-semibold mb-4">基本情報</h3>
        <div className="space-y-4">
          <FormControl label="名前" htmlFor="name">
            <Input id="name" />
          </FormControl>
          <FormControl label="メールアドレス" htmlFor="email">
            <Input id="email" type="email" />
          </FormControl>
        </div>
      </div>


      <Divider spacing="lg" />


      <div>
        <h3 className="text-lg font-semibold mb-4">連絡先</h3>
        <div className="space-y-4">
          <FormControl label="電話番号" htmlFor="phone">
            <Input id="phone" type="tel" />
          </FormControl>
          <FormControl label="住所" htmlFor="address">
            <Input id="address" />
          </FormControl>
        </div>
      </div>
    </form>
  )
}

ツールバーの区切り:

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


export function Toolbar() {
  return (
    <div className="flex items-center gap-2 p-2 border rounded">
      <Button variant="ghost" size="sm">太字</Button>
      <Button variant="ghost" size="sm">斜体</Button>
      <Button variant="ghost" size="sm">下線</Button>


      <Divider orientation="vertical" spacing="sm" />


      <Button variant="ghost" size="sm">左揃え</Button>
      <Button variant="ghost" size="sm">中央揃え</Button>
      <Button variant="ghost" size="sm">右揃え</Button>


      <Divider orientation="vertical" spacing="sm" />


      <Button variant="ghost" size="sm">リンク</Button>
      <Button variant="ghost" size="sm">画像</Button>
    </div>
  )
}

ブレッドクラム:

import { Divider } from '@codeconnect-llc/design-system'


export function Breadcrumb({ items }) {
  return (
    <nav className="flex items-center text-sm">
      {items.map((item, index) => (
        <>
          <a
            key={item.href}
            href={item.href}
            className="hover:text-brand"
          >
            {item.label}
          </a>
          {index < items.length - 1 && (
            <span className="mx-2">/</span>
          )}
        </>
      ))}
    </nav>
  )
}

価格表:

import { Divider } from '@codeconnect-llc/design-system'


export function PricingCard({ plan }) {
  return (
    <div className="border rounded-lg p-6 space-y-4">
      <h3 className="text-2xl font-bold">{plan.name}</h3>
      <div className="text-3xl font-bold">
        ¥{plan.price.toLocaleString()}
        <span className="text-base font-normal text-gray-600">/月</span>
      </div>


      <Divider variant="dashed" />


      <ul className="space-y-3">
        {plan.features.map((feature) => (
          <li key={feature} className="flex items-start">
            <CheckIcon className="h-5 w-5 text-green-500 mr-2" />
            <span>{feature}</span>
          </li>
        ))}
      </ul>


      <Divider variant="dashed" />


      <Button variant="primary" className="w-full">
        {plan.name}を選択
      </Button>
    </div>
  )
}