项目符号列表项块

项目符号列表项块用于创建无序列表。每个项目以项目符号开始。

数据结构

项目符号列表项块的 Notion 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 函数处理。

注意事项

• 项目符号列表项块连续使用时会自动组合成一个列表。
• 使用嵌套列表时，建议使用适当的缩进以明确层次结构。
• 项目符号的形状遵循 Notion 的默认样式，但可以通过 CSS 进行自定义。