CheDialog

ダイアログ（モーダル）コンポーネントです。ユーザーの注意を引き、情報の表示や操作の確認に使用します。

内部では @base-ui/react の Dialog と ScrollArea を利用しており、長いコンテンツにも対応しています。

基本

最小限の構成では opened、onOpenChange、title、openTrigger を指定します。

openTrigger にはダイアログを開くためのトリガー要素（ボタンなど）を指定します。

プレビュー

使用例

import { useState } from "react";
import { CheButton, CheDialog } from "@sen-corporation/cheese-base";

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <CheDialog
      opened={open}
      onOpenChange={setOpen}
      title="通知"
      description="すべての通知を確認しました。"
      openTrigger={
        <CheButton onClick={() => setOpen(true)}>ダイアログを開く</CheButton>
      }
    />
  );
};

アクションボタン付き

action プロパティで Accept/Cancel ボタンを表示できます。

プレビュー

使用例

import { useState } from "react";
import { CheButton, CheDialog } from "@sen-corporation/cheese-base";

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <CheDialog
      opened={open}
      onOpenChange={setOpen}
      title="削除の確認"
      description="この操作は取り消せません。本当に削除しますか？"
      openTrigger={<CheButton onClick={() => setOpen(true)}>削除</CheButton>}
      action={{
        accept: {
          label: "削除する",
          onClick: () => {
            // 削除処理
            setOpen(false);
          },
        },
        cancel: {
          label: "キャンセル",
          onClick: () => {
            setOpen(false);
          },
        },
      }}
    />
  );
};

長いコンテンツ

children で任意のコンテンツを表示できます。長いコンテンツは自動的にスクロール可能になります。

プレビュー

使用例

import { useState } from "react";
import { CheButton, CheDialog } from "@sen-corporation/cheese-base";

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <CheDialog
      opened={open}
      onOpenChange={setOpen}
      title="利用規約"
      description="以下の内容をご確認ください。"
      openTrigger={
        <CheButton onClick={() => setOpen(true)}>利用規約を読む</CheButton>
      }
    >
      <div>
        <p>第1条 規約の適用...</p>
        <p>第2条 利用登録...</p>
        {/* 長いコンテンツ */}
      </div>
    </CheDialog>
  );
};

Backdrop クリック無効化

dismissible={false} を指定すると、Backdrop（背景）クリックでダイアログが閉じなくなります。

プレビュー

使用例

import { useState } from "react";
import { CheButton, CheDialog } from "@sen-corporation/cheese-base";

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <CheDialog
      opened={open}
      onOpenChange={setOpen}
      title="重要な確認"
      description="必ずお読みください。"
      dismissible={false}
      openTrigger={
        <CheButton onClick={() => setOpen(true)}>確認事項を開く</CheButton>
      }
      action={{
        accept: {
          label: "確認しました",
          onClick: () => setOpen(false),
        },
        cancel: {
          label: "閉じる",
          onClick: () => setOpen(false),
        },
      }}
    />
  );
};

Props

CheDialogActionProps

注意事項

• ダイアログは必ず制御コンポーネントとして使用してください（opened、onOpenChange、openTrigger を指定）
• openTrigger には Base UI の Dialog.Trigger でラップされる要素を指定します
• 右上の閉じるボタン（×）は常に表示されます
• dismissible={false} でも ESC キーでダイアログが閉じる場合があります（Base UI の仕様）
• ダイアログの最大高さは 600px、最小高さは 280px です
• ダイアログの最大幅は 720px、最小幅は 335px です