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