block-types > 見出しブロック
見出しブロック
見出しブロックは文書の構造を表現するために使用され、3つのレベル(見出し1、見出し2、見出し3)をサポートしています。
データ構造
見出しブロックのノーションAPIデータ構造は以下の通りです(見出し1の例):
{
"type": "heading_1",
"heading_1": {
"rich_text": [
{
"type": "text",
"text": {
"content": "This is a heading",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "This is a heading",
"href": null
}
],
"color": "default",
"is_toggleable": false
}
}
type
: "heading_1", "heading_2", または "heading_3" のいずれかです。rich_text
: 見出しテキストの内容とスタイル情報を含む配列です。color
: 見出しの色を指定します。is_toggleable
: トグル機能を使用するかどうかを示すフラグです。
Reactコンポーネント
Notionpressoで見出しブロックをレンダリングするコンポーネントは以下の通りです:
import React, { useMemo } from "react";
import type { HeadingsProps, HeadingConfig } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";
const Headings: React.FC<HeadingsProps> = ({ children, type, ...props }) => {
const {
[type]: { color, rich_text: texts, is_toggleable },
} = props;
const { headingTag: HeadingTag, headingClassName } =
useMemo<HeadingConfig>(() => {
switch (type) {
case "heading_2":
return { headingTag: "h2", headingClassName: "notion-h2" };
case "heading_3":
return { headingTag: "h3", headingClassName: "notion-h3" };
default:
return { headingTag: "h1", headingClassName: "notion-h1" };
}
}, [type]);
return (
<div
className={`notion-block ${headingClassName} ${getColorCss(color)}`}
>
<HeadingTag className={`notion-h-content ${headingClassName}-content`}>
<RichText props={texts} />
</HeadingTag>
{children}
</div>
);
};
export default Headings;
使用例
見出しブロックを使用する例は以下の通りです:
import { Notion } from "@notionpresso/react";
function MyNotionPage({ blocks }) {
return (
<Notion>
<Notion.Blocks blocks={blocks} />
</Notion>
);
}
ここで blocks
はNotion APIから取得したブロックデータの配列です。
スタイリング
見出しブロックのスタイルは以下のCSSクラスを使用してカスタマイズできます:
.notion-block
: すべてのNotionブロックに適用されるデフォルトのスタイル.notion-h1
,.notion-h2
,.notion-h3
: 各見出しレベルに対する特定のスタイル.notion-h1-content
,.notion-h2-content
,.notion-h3-content
: 各見出しの内容のスタイル
追加のスタイリングが必要な場合は、これらのクラスを対象にCSSを記述することができます。
注意点
- 見出しブロックは文書の構造を表現する重要な要素であるため、適切なレベルの見出しを使用することが推奨されます。
is_toggleable
プロパティが true の場合、その見出しはトグル機能を持つことになります。この場合、追加のロジックが必要になる場合があります。