モーダル

Modalコンポーネントは、ユーザーの注意を引くオーバーレイダイアログを表示するために使用されます。フォーム、確認ダイアログ、詳細情報の表示などに適しています。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

サイズバリエーション: sm、md、lg、xlの4つのサイズ
バリアント: default、outlinedの2つのスタイル
アクセシビリティ: キーボードナビゲーションとスクリーンリーダー対応
レスポンシブ: モバイルデバイスでの適切な表示
カスタマイズ可能: タイトル、フッター、コンテンツの柔軟な配置
テーマ対応: ライトテーマとダークテーマの自動切り替え

使用方法

---
import { Modal } from '@karan-monorepo/ui-core';
---

<kds-modal title="モーダルタイトル" size="md" open="true">
  <p>モーダルのコンテンツ</p>

  <div slot="footer">
    <kds-button variant="outline" size="md">キャンセル</kds-button>
    <kds-button variant="primary" size="md">確認</kds-button>
  </div>
</kds-modal>

使用例

Modal Component

Modal dialog component for displaying content in an overlay.

Basic Usage

Simple Modal

This is a basic modal dialog for displaying content.

The modal overlays the background and draws user attention.

Sizes

Small (400px)

Small modal is suitable for simple confirmations or short messages.

Medium (600px)

Medium modal is suitable for general forms or detailed information display.

Large (800px)

Large modal is suitable for complex forms or detailed content display.

Extra Large (1000px)

Extra large modal is suitable for very complex content or data tables.

Variants

Default

This modal uses the default variant with standard styling.

Outlined

This modal uses the outlined variant with border styling.

States

Closable

This modal can be closed by clicking the close button or outside the modal.

Non-closable

This modal cannot be closed by clicking outside or the close button.

Usage Examples

Confirmation Dialog

Are you sure you want to delete this item? This action cannot be undone.

Cancel

Delete

Form Modal

Cancel

Save Changes

Information Modal

Premium Product

¥29,999

High-quality product with excellent features and durability.

Premium materials
Advanced technology
2-year warranty

Add to Cart

バリエーション

Modalコンポーネントは4つのサイズと2つのバリアントをサポートします：

サイズバリエーション

sm: 小さいモーダル（400px）- シンプルな確認や短いメッセージに適しています
md: 中サイズモーダル（600px）- 一般的なフォームや詳細情報の表示に適しています
lg: 大きいモーダル（800px）- 複雑なフォームや詳細なコンテンツの表示に適しています
xl: 特大モーダル（1000px）- データテーブルや複雑なレイアウトの表示に適しています

<!-- 小さいモーダル -->
<kds-modal size="sm" title="小さいモーダル">
  <p>シンプルな確認や短いメッセージに適しています。</p>
</kds-modal>

<!-- 中サイズモーダル -->
<kds-modal size="md" title="中サイズモーダル">
  <p>一般的なフォームや詳細情報の表示に適しています。</p>
</kds-modal>

<!-- 大きいモーダル -->
<kds-modal size="lg" title="大きいモーダル">
  <p>複雑なフォームや詳細なコンテンツの表示に適しています。</p>
</kds-modal>

<!-- 特大モーダル -->
<kds-modal size="xl" title="特大モーダル">
  <p>データテーブルや複雑なレイアウトの表示に適しています。</p>
</kds-modal>

バリアント

default: デフォルトスタイル
outlined: アウトライン付きスタイル

<!-- デフォルトスタイル -->
<kds-modal variant="default" title="デフォルトモーダル">
  <p>デフォルトのモーダルスタイルです。</p>
</kds-modal>

<!-- アウトライン付きスタイル -->
<kds-modal variant="outlined" title="アウトライン付きモーダル">
  <p>アウトライン付きのモーダルスタイルです。</p>
</kds-modal>

プロパティ

プロパティ	型	デフォルト	説明
`title`	`string`	`''`	モーダルのタイトル
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	モーダルのサイズ
`open`	`boolean`	`false`	モーダルの表示状態
`closable`	`boolean`	`true`	閉じるボタンの表示
`variant`	`'default' \| 'outlined'`	`'default'`	モーダルのバリアント
`theme`	`'light' \| 'dark'`	`'light'`	モーダルのカラーテーマ

スロット

デフォルトスロット

モーダルのメインコンテンツを配置します。

<kds-modal title="コンテンツ例">
  <p>メインコンテンツ</p>
  <kds-button>アクションボタン</kds-button>
</kds-modal>

モーダルのフッターにアクションボタンなどを配置します。

<kds-modal title="フッター例">
  <p>コンテンツ</p>

  <div slot="footer">
    <kds-button variant="outline">キャンセル</kds-button>
    <kds-button variant="primary">保存</kds-button>
  </div>
</kds-modal>

イベント

イベント	説明
`close`	モーダルが閉じられたときに発火

const modal = document.querySelector('kds-modal');
modal.addEventListener('close', () => {
  console.log('モーダルが閉じられました');
});

使用ケース

確認ダイアログ

<kds-modal title="削除の確認" size="sm">
  <p>このアイテムを削除してもよろしいですか？</p>
  <p>この操作は取り消すことができません。</p>

  <div slot="footer">
    <kds-button variant="outline" size="md">キャンセル</kds-button>
    <kds-button variant="danger" size="md">削除</kds-button>
  </div>
</kds-modal>

フォームモーダル

<kds-modal title="ユーザー情報の編集" size="md">
  <form>
    <div class="form-group">
      <label for="name">名前</label>
      <kds-input id="name" placeholder="名前を入力" />
    </div>

    <div class="form-group">
      <label for="email">メールアドレス</label>
      <kds-input id="email" type="email" placeholder="メールアドレスを入力" />
    </div>
  </form>

  <div slot="footer">
    <kds-button variant="outline" size="md">キャンセル</kds-button>
    <kds-button variant="primary" size="md">保存</kds-button>
  </div>
</kds-modal>

詳細表示モーダル

<kds-modal title="商品詳細" size="lg">
  <div class="product-details">
    <img src="product-image.jpg" alt="商品画像" />
    <div class="product-info">
      <h3>商品名</h3>
      <p>商品の詳細説明</p>
      <div class="price">¥1,000</div>
    </div>
  </div>

  <div slot="footer">
    <kds-button variant="outline" size="md">閉じる</kds-button>
    <kds-button variant="primary" size="md">カートに追加</kds-button>
  </div>
</kds-modal>

スタイリング

Modalコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
カラー: ライト/ダークテーマに対応したカラートークン
スペーシング: デザインシステムのスペーシングトークン
レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

Modalコンポーネントには適切なアクセシビリティ機能が含まれています：

セマンティックHTMLの<dialog>要素を使用
キーボードナビゲーションサポート（Tab、Escape）
高コントラスト比による視認性の確保
スクリーンリーダー対応の構造
フォーカス管理と背景スクロールの制御

ベストプラクティス

適切なサイズの選択: コンテンツに応じて適切なサイズを選択する
明確なアクション: フッターに明確なアクションボタンを配置する
キーボード対応: すべての機能がキーボードで操作可能にする
適切なタイトル: モーダルの目的が明確なタイトルを設定する
背景クリック: 重要な操作では背景クリックでの閉じるを無効化する
両方のテーマでテスト: 良好なコントラストと可読性を確保する

ブラウザサポート

Modalコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

CSS Custom Properties
Web Components (Lit)
CSS Grid
CSS Flexbox