跳到主要内容

笔记组件（Memo）

本组件适用于学习笔记，如听视频课程时，在笔记中记录老师讲的内容，或课件上的内容。使用本组件标识某部分的内容是自己理解的内容，或内容是老师额外补充的内容不是课件上的内容。在《B站宋红康老师JVM笔记》中大量使用了此组件。

点击这里 体验组件。

组件定义​

安装图标组件

npm install --save @iconify/react
shell

组件的实现代码如下：

import React, {ReactNode} from 'react';
import {Icon} from '@iconify/react';
import MDXContent from "@theme/MDXContent";

export enum MemoTheme {
    default = 'memo-theme-daybreak',
    dust = 'memo-theme-dust',
    volcano = 'memo-theme-volcano',
    sunset = 'memo-theme-sunset',
    calendula = 'memo-theme-calendula',
    sunrise = 'memo-theme-sunrise',
    lime = 'memo-theme-lime',
    polar = 'memo-theme-polar',
    cyan = 'memo-theme-cyan',
    geek = 'memo-theme-geek',
    purple = 'memo-theme-purple',
    magenta = 'memo-theme-magenta',
    gray = 'memo-theme-gray',
    dark = 'memo-theme-dark',
}

export interface MemoProps {
    children?: ReactNode,
    title?: string | ReactNode,
    theme?: MemoTheme | string,
    icon?: string
}

export default function Memo(props: MemoProps) {
    const theme = props.theme ? MemoTheme[props.theme] : MemoTheme.default
    const iconName = props.icon ? props.icon : 'twemoji:memo'
    return (<div className={`memoContainer ${theme}`}>
        <div className="memo-title">
            <Icon icon={iconName} height="32"/>
            <span className={'title-text'}>{props.title}</span>
        </div>
        <div className="bodyContainer">
            {props.children}
        </div>
    </div>);
}
tsx

组件定义了14种主题，同时可以自定义图标。

主题列表：

  • default
  • dust
  • volcano
  • sunset
  • calendula
  • sunrise
  • lime
  • polar
  • cyan
  • geek
  • purple
  • magenta
  • gray
  • dark

主题的色彩方案参考是Ant Design：https://ant.design/docs/spec/colors-cn

组件使用​

<Memo title="笔记标题">
这是我的一段笔记
</Memo>

<Memo title="笔记标题" theme="dust">
这是我的一段笔记
</Memo>

<Memo title="笔记标题" theme="gray">
这是我的一段笔记
</Memo>

<Memo title="笔记标题" theme="dark" icon="clarity:heart-broken-solid">
这是我的一段笔记
</Memo>
markdown

默认主题样式

笔记标题

这是我的一段笔记

设置主题样式

笔记标题

这是我的一段笔记

笔记标题

这是我的一段笔记

自定义图标

笔记标题

这是我的一段笔记

主题样式​

笔记标题

这是我的一段笔记，主题：默认

笔记标题

这是我的一段笔记，主题：dust

笔记标题

这是我的一段笔记，主题：volcano

笔记标题

这是我的一段笔记，主题：sunset

笔记标题

这是我的一段笔记，主题：calendula

笔记标题

这是我的一段笔记，主题：sunrise

笔记标题

这是我的一段笔记，主题：lime

笔记标题

这是我的一段笔记，主题：polar

笔记标题

这是我的一段笔记，主题：cyan

笔记标题

这是我的一段笔记，主题：geek

笔记标题

这是我的一段笔记，主题：purple

笔记标题

这是我的一段笔记，主题：magenta

笔记标题

这是我的一段笔记，主题：gray

笔记标题

这是我的一段笔记，主题：dark

关于图标​

图标可以从：https://icon-sets.iconify.design/ 检索。找到想要使用的图标后，点击图标，弹出图标窗口，如下

注意ICON的选择，要选择Iconify Icon，否则无法正确获取图标的SVG文件，继而导致图标无法显示的问题。

点击图标名称旁边的Copy icon name to clipboard可以复制图标名称。