GithubXDiscord

block-types > トグルブロック

トグルブロック

トグルブロックは、折りたたみ可能なコンテンツを作成するために使用されます。ユーザーがトグルをクリックすると、隠れた内容が展開または折りたたまれるインタラクティブな要素です。

データ構造

トグルブロックのノーションAPIデータ構造は以下の通りです:

{
  "type": "toggle",
  "toggle": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "Click to toggle",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "Click to toggle",
        "href": null
      }
    ],
    "color": "default",
    "children": [
      // 中にネストされたブロック...
    ]
  }
}
  • rich_text: トグルの表示テキストとスタイル情報を含む配列です。
  • color: トグルテキストの色を指定します。
  • children: トグルが展開されたときに表示される中にネストされたブロックの配列です。

Reactコンポーネント

Notionpressoでトグルブロックをレンダリングするコンポーネントは以下の通りです:

import React, { useState, useCallback } from "react";
import type { ToggleArgs } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";

type ToggleProps = {
  children?: React.ReactNode;
} & ToggleArgs;

const Toggle: React.FC<ToggleProps> = ({ children, ...props }) => {
  const {
    toggle: { color, rich_text: texts },
  } = props;

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

  const toggleOpen = useCallback(() => setOpen((prevOpen) => !prevOpen), []);

  return (
    <div
      className={`notion-block notion-toggle ${getColorCss(color)} ${
        open ? "notion-toggle-open" : ""
      }`}
      aria-expanded={open}
    >
      <div className="notion-toggle-content">
        <button onClick={toggleOpen} className="notion-toggle-button">
          <div
            className={`notion-toggle-button-arrow ${
              open ? "notion-toggle-button-arrow-opened" : ""
            }`}
          />
        </button>
        <p>
          <RichText props={texts} />
        </p>
      </div>

      {open && children}
    </div>
  );
};

export default Toggle;

使用例

トグルブロックを使用する例は以下の通りです:

import { Notion } from "@notionpresso/react";

function MyNotionPage({ blocks }) {
  return (
    <Notion>
      <Notion.Blocks blocks={blocks} />
    </Notion>
  );
}

ここでblocksは、Notion APIから受け取ったブロックデータの配列です。

状態管理

トグルブロックは、内部でuseStateフックを使用して開閉状態を管理します。open変数は、トグルの現在の状態を表し、toggleOpen関数はこの状態を切り替えます。

スタイリング

トグルブロックのスタイルは、以下のCSSクラスを使用してカスタマイズできます:

  • .notion-block: すべてのNotionブロックに適用される基本スタイル
  • .notion-toggle: Toggleブロックの特定スタイル
  • .notion-toggle-open: Toggleが開いているときのスタイル
  • .notion-toggle-content: Toggleの内容のスタイル
  • .notion-toggle-button: Toggleボタンのスタイル
  • .notion-toggle-button-arrow: Toggle矢印のスタイル

必要に応じて、これらのクラスを対象にCSSを記述することができます。例えば:

.notion-toggle {
  margin-bottom: 8px;
}

.notion-toggle-button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-right: 4px;
}

.notion-toggle-button-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
  transition: transform 0.3s ease;
}

.notion-toggle-button-arrow-opened {
  transform: rotate(180deg);
}

中にネストされたものをサポート

トグルブロックは、他のブロックを含むことができます。これはchildrenプロップを使用して処理されます。トグルが開いているときにのみchildrenがレンダリングされます。

アクセシビリティに関する考慮事項

  • aria-expanded属性を使用して、トグルの現在の状態をスクリーンリーダーに通知します。
  • キーボードナビゲーションをサポートするために、トグルボタンにtabIndex={0}を追加することが推奨されます。
  • トグルボタンに適切なaria-labelを提供して、その機能を明確に説明することが推奨されます。

注意点

  • トグルの内部には、使用者の体験を低下させる可能性があるため、適切な量のコンテンツのみを含むことが推奨されます。
  • トグルの開閉状態は、サーバーに保存されないため、ページを再読み込みすると、すべてのトグルがデフォルトの状態(閉じた状態)に戻ります。
  • 深いレベルのネストされたトグルは、使用者を混乱させる可能性があるため、可能な限りネストレベルを制限することが推奨されます。