GithubXDiscord

block-types > 番号付きリストアイテムブロック

番号付きリストアイテムブロック

番号付きリストアイテムブロックは、順序のあるリストを作成するために使用されます。各項目は連番で始まります。

データ構造

番号付きリストアイテムブロックのノーションAPIデータ構造は以下の通りです:

{
  "type": "numbered_list_item",
  "numbered_list_item": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a numbered list item",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a numbered list item",
        "href": null
      }
    ],
    "color": "default"
  }
}
  • rich_text: リストアイテムのテキスト内容とスタイル情報を含む配列です。
  • color: テキストの色を指定します。

Reactコンポーネント

Notionpressoで番号付きリストアイテムブロックをレンダリングするコンポーネントは以下の通りです:

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

type NumberedListProps = {
  children?: React.ReactNode;
} & NumberedListItemArgs;

const NumberedListItem: React.FC<NumberedListProps> = ({
  children,
  ...props
}) => {
  const {
    numbered_list_item: { rich_text: texts, color },
  } = props;
  const { marker, format } = numberedListItemMarker.getMarker(props);

  return (
    <ol
      data-notion-marker-format={format}
      className={`notion-block notion-list-numbered ${getColorCss(color)}`}
    >
      <li className="notion-display-contents">
        <div className="notion-list-numbered-content">
          <span
            data-notion-marker-format={format}
            className="notion-list-marker"
          >
            {marker}
          </span>
          <p>
            <RichText props={texts} />
          </p>
        </div>
        {children}
      </li>
    </ol>
  );
};

export default NumberedListItem;

使用例

番号付きリストアイテムブロックを使用する例は以下の通りです:

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

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

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

スタイリング

番号付きリストアイテムブロックのスタイルは、以下のCSSクラスを使用してカスタマイズできます:

  • .notion-block: すべてのNotionブロックに適用される基本スタイル
  • .notion-list-numbered: 番号付きリストアイテムブロックの特定のスタイル
  • .notion-list-numbered-content: リストアイテムの内容のスタイル
  • .notion-list-marker: 番号のスタイル

追加のスタイリングが必要な場合は、これらのクラスを対象にCSSを記述することができます。

番号付けの方法

番号付きリストアイテムの番号付けの方法は、numberedListItemMarker.getMarker関数によって決定されます。この関数は、現在のアイテムの位置とネストレベルを考慮して、適切な番号または文字を返します。デフォルトでは、次の順序に従います:

  1. 最上位レベル: 1, 2, 3, ...
  2. 2番目のレベル: a, b, c, ...
  3. 3番目のレベル: i, ii, iii, ...

この順序は、必要に応じてカスタマイズできます。

ネストされたリストの処理

番号付きリストアイテムはネストすることもできます。ネストされたリストはchildrenpropを使用して処理されます。ネストレベルに応じて、番号付けの方法が変わる可能性があります。これはnumberedListItemMarker.getMarker関数によって処理されます。

注意点

  • 番号付きリストアイテムブロックは、連続して使用される場合、自動的に1つのリストにグループ化されます。
  • ネストされたリストを使用する場合は、適切なインデントを使用して階層構造を明確にすることが推奨されます。
  • 番号付けの方法は、Notionのデフォルトスタイルに従いますが、CSSを使用してカスタマイズすることも可能です。
  • リストが中断された後に再開される場合、番号付けが新しく開始される可能性があるため、注意が必要です。