block-types > 段落ブロック
段落ブロック
段落ブロックは、一般的なテキストを表現する最も基本的なブロックタイプです。
データ構造
段落ブロックのノーションAPIデータ構造は以下の通りです:
{
"type": "paragraph",
"paragraph": {
"rich_text": [
{
"type": "text",
"text": {
"content": "This is a paragraph.",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "This is a paragraph.",
"href": null
}
],
"color": "default"
}
}
rich_text
: テキストの内容とスタイル情報を含む配列です。color
: テキストの色を指定します。
Reactコンポーネント
Notionpressoで段落ブロックをレンダリングするコンポーネントは以下の通りです:
import React from "react";
import type { ParagraphArgs } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";
type ParagraphProps = {
children?: React.ReactNode;
} & ParagraphArgs;
const Paragraph: React.FC<ParagraphProps> = ({ children, ...props }) => {
const {
paragraph: { color, rich_text: texts },
} = props;
return (
<div className={`notion-block notion-paragraph ${getColorCss(color)}`}>
<p className="notion-paragraph-content">
<RichText props={texts} />
</p>
{children}
</div>
);
};
export default Paragraph;
使用例
段落ブロックを使用する例は以下の通りです:
import { Notion } from "@notionpresso/react";
function MyNotionPage({ blocks }) {
return (
<Notion>
<Notion.Blocks blocks={blocks} />
</Notion>
);
}
ここでblocks
は、Notion APIから受け取ったブロックデータの配列です。
スタイリング
段落ブロックのスタイルは、以下のCSSクラスを使用してカスタマイズできます:
.notion-block
: すべてのNotionブロックに適用されるデフォルトのスタイル.notion-paragraph
: 段落ブロックの特定のスタイル.notion-paragraph-content
: 段落の内容のスタイル
追加のスタイリングが必要な場合は、これらのクラスを対象にCSSを記述することができます。