文档示例

此页面列举了 dumi 渲染各项 Markdown 样式以及 Demo 的效果。

Demo 嵌入

import React from 'react';
import { Button } from 'antd';
export default () => <Button type="primary">我是 antd 的按钮</Button>;

外部 Demo

import React from 'react';
import { Button, Modal } from 'antd';
class App extends React.Component {
  state = { visible: false };
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}
export default () => <App />;

TS 转 JS

如果我们的 demo 是采用 TSX 编写的，在展开源代码后，点击一旁的语言切换按钮，可切换显示成 JSX 的代码

import React from 'react';
import { Button } from 'antd';
type MsgType = string;
function hello(msg: MsgType) {
  alert(msg);
}
export default () => (
  <Button type="primary" onClick={hello.bind(null, 'Hello!')}>
    点击我就 Hello!
  </Button>
);

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

水平线

强调样式

字体加粗

斜体样式

删除线样式

引用

引用可以被嵌套

只要引用符号比上一级多就能产生嵌套

列表

无序列表

• 使用 +、- 或 * 来创建无序列表
• 列表可以嵌套，嵌套会产生缩进
  • 我是子列表项

有序列表

1. dumi 不基于 father
2. dumi 基于 Umi
3. dumi 核心是一个 Umi 插件

代码

行内 code

代码块：

// some code here

语法高亮

console.log('Hello World!');

表格

单元格右对齐

超链接

前往 Umi 官网

自动转换超链接 https://umijs.org