GithubXDiscord

block-types > 箇条書きリストアイテムブロック

箇条書きリストアイテムブロック

箇条書きリストアイテムブロックは、順序のないリストを作成するために使用されます。各項目は箇条書き記号(バレット)で始まります。

データ構造

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

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

Reactコンポーネント

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

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

type BulletedListItemProps = {
  children?: React.ReactNode;
} & BulletedListItemArgs;

const BulletedListItem: React.FC<BulletedListItemProps> = ({
  children,
  ...props
}) => {
  const {
    bulleted_list_item: { rich_text: texts, color },
  } = props;
  const { marker, format } = bulletedListItemMarker.getMarker(props);

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

export default BulletedListItem;

使用例

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

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

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

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

スタイリング

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

  • .notion-block: すべてのNotionブロックに適用されるデフォルトのスタイル
  • .notion-list-bulleted: 箇条書きリストアイテムブロックの特定のスタイル
  • .notion-list-bulleted-content: リストアイテムの内容のスタイル
  • .notion-list-marker: 箇条書き記号のスタイル

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

入れ子のリストの処理

箇条書きリストアイテムは入れ子にすることができます。入れ子のリストはchildren propを使用して処理されます。レベルに応じて箇条書き記号の形状が変わる可能性があります。これはbulletedListItemMarker.getMarker関数で処理されます。

注意点

  • 箇条書きリストアイテムブロックは、連続して使用される場合、自動的に1つのリストにグループ化されます。
  • 入れ子のリストを使用する場合は、適切なインデントを使用して階層構造を明確にすることが推奨されます。
  • 箇条書き記号の形状は、Notionのデフォルトのスタイルに従いますが、CSSを使用してカスタマイズすることができます。