GithubXDiscord

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を記述することができます。