logoMogu Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 组件总览
  • 通用
    • Button按钮
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器New
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
  • 其他
    • Affix固钉
    • App包裹组件
    • ConfigProvider全局化配置
    • FloatButton悬浮按钮
    • Watermark水印
何时使用
代码演示
基本
非模态
位置
自定义遮罩样式
自定义指示器
API
Tour
TourStep 引导步骤卡片

Tour漫游式引导

Tooltip文字提示Tree树形控件

用于分步引导用户了解产品功能的气泡组件。自 5.0.0 版本开始提供该组件。

何时使用

常用于引导用户了解产品功能。

代码演示

基本

最简单的用法。

expand codeexpand code
TypeScript
JavaScript
import React, { useRef, useState } from 'react';
import { Button, Divider, Space, Tour } from 'mogud';
import type { TourProps } from 'mogud';
import { EllipsisOutlined } from '@ant-design/icons';

const App: React.FC = () => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);

  const [open, setOpen] = useState<boolean>(false);

  const steps: TourProps['steps'] = [
    {
      title: 'Upload File',
      description: 'Put your files here.',
      cover: (
        <img
          alt="tour.png"
          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
        />
      ),
      target: () => ref1.current,
    },
    {
      title: 'Save',
      description: 'Save your changes.',
      target: () => ref2.current,
    },
    {
      title: 'Other Actions',
      description: 'Click to see other actions.',
      target: () => ref3.current,
    },
  ];

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        Begin Tour
      </Button>

      <Divider />

      <Space>
        <Button ref={ref1}> Upload</Button>
        <Button ref={ref2} type="primary">
          Save
        </Button>
        <Button ref={ref3} icon={<EllipsisOutlined />} />
      </Space>

      <Tour open={open} onClose={() => setOpen(false)} steps={steps} />
    </>
  );
};

export default App;
位置

改变引导相对于目标的位置，共有 12 种位置可供选择。当 target={null} 时引导将会展示在正中央。

expand codeexpand code
TypeScript
JavaScript
import React, { useRef, useState } from 'react';
import { Button, Tour } from 'mogud';
import type { TourProps } from 'mogud';

const App: React.FC = () => {
  const ref = useRef(null);

  const [open, setOpen] = useState<boolean>(false);

  const steps: TourProps['steps'] = [
    {
      title: 'Center',
      description: 'Displayed in the center of screen.',
      target: null,
    },
    {
      title: 'Right',
      description: 'On the right of target.',
      placement: 'right',
      target: () => ref.current,
    },
    {
      title: 'Top',
      description: 'On the top of target.',
      placement: 'top',
      target: () => ref.current,
    },
  ];

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)} ref={ref}>
        Begin Tour
      </Button>

      <Tour open={open} onClose={() => setOpen(false)} steps={steps} />
    </>
  );
};

export default App;
自定义指示器

自定义指示器。

expand codeexpand code
TypeScript
JavaScript
import { EllipsisOutlined } from '@ant-design/icons';
import type { TourProps } from 'mogud';
import { Button, Divider, Space, Tour } from 'mogud';
import React, { useRef, useState } from 'react';

const App: React.FC = () => {
  const ref1 = useRef<HTMLButtonElement>(null);
  const ref2 = useRef<HTMLButtonElement>(null);
  const ref3 = useRef<HTMLButtonElement>(null);

  const [open, setOpen] = useState<boolean>(false);

  const steps: TourProps['steps'] = [
    {
      title: 'Upload File',
      description: 'Put your files here.',
      target: () => ref1.current!,
    },
    {
      title: 'Save',
      description: 'Save your changes.',
      target: () => ref2.current!,
    },
    {
      title: 'Other Actions',
      description: 'Click to see other actions.',
      target: () => ref3.current!,
    },
  ];

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        Begin Tour
      </Button>
      <Divider />
      <Space>
        <Button ref={ref1}>Upload</Button>
        <Button ref={ref2} type="primary">
          Save
        </Button>
        <Button ref={ref3} icon={<EllipsisOutlined />} />
      </Space>
      <Tour
        open={open}
        onClose={() => setOpen(false)}
        steps={steps}
        indicatorsRender={(current, total) => (
          <span>
            {current + 1} / {total}
          </span>
        )}
      />
    </>
  );
};

export default App;
非模态

使用 mask={false} 可以将引导变为非模态，同时为了强调引导本身，建议与 type="primary" 组合使用。

expand codeexpand code
TypeScript
JavaScript
import React, { useRef, useState } from 'react';
import { Button, Divider, Space, Tour } from 'mogud';
import type { TourProps } from 'mogud';
import { EllipsisOutlined } from '@ant-design/icons';

const App: React.FC = () => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);

  const [open, setOpen] = useState<boolean>(false);

  const steps: TourProps['steps'] = [
    {
      title: 'Upload File',
      description: 'Put your files here.',
      cover: (
        <img
          alt="tour.png"
          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
        />
      ),
      target: () => ref1.current,
    },
    {
      title: 'Save',
      description: 'Save your changes.',
      target: () => ref2.current,
    },
    {
      title: 'Other Actions',
      description: 'Click to see other actions.',
      target: () => ref3.current,
    },
  ];

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        Begin non-modal Tour
      </Button>

      <Divider />

      <Space>
        <Button ref={ref1}> Upload</Button>
        <Button ref={ref2} type="primary">
          Save
        </Button>
        <Button ref={ref3} icon={<EllipsisOutlined />} />
      </Space>

      <Tour open={open} onClose={() => setOpen(false)} mask={false} type="primary" steps={steps} />
    </>
  );
};

export default App;
自定义遮罩样式

自定义遮罩样式。

expand codeexpand code
TypeScript
JavaScript
import React, { useRef, useState } from 'react';
import { Button, Divider, Space, Tour } from 'mogud';
import type { TourProps } from 'mogud';
import { EllipsisOutlined } from '@ant-design/icons';

const App: React.FC = () => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);

  const [open, setOpen] = useState<boolean>(false);

  const steps: TourProps['steps'] = [
    {
      title: 'Upload File',
      description: 'Put your files here.',
      cover: (
        <img
          alt="tour.png"
          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
        />
      ),
      target: () => ref1.current,
    },
    {
      title: 'Save',
      description: 'Save your changes.',
      target: () => ref2.current,
      mask: {
        style: {
          boxShadow: 'inset 0 0 15px #fff',
        },
        color: 'rgba(40, 0, 255, .4)',
      },
    },
    {
      title: 'Other Actions',
      description: 'Click to see other actions.',
      target: () => ref3.current,
      mask: false,
    },
  ];

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        Begin Tour
      </Button>

      <Divider />

      <Space>
        <Button ref={ref1}> Upload</Button>
        <Button ref={ref2} type="primary">
          Save
        </Button>
        <Button ref={ref3} icon={<EllipsisOutlined />} />
      </Space>

      <Tour
        open={open}
        onClose={() => setOpen(false)}
        steps={steps}
        mask={{
          style: {
            boxShadow: 'inset 0 0 15px #333',
          },
          color: 'rgba(80, 255, 255, .4)',
        }}
      />
    </>
  );
};

export default App;

API

Tour

属性说明类型默认值版本
arrow是否显示箭头，包含是否指向元素中心的配置boolean | { pointAtCenter: boolean}true
placement引导卡片相对于目标元素的位置left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRightbottom
onClose关闭引导时的回调函数Function-
onFinish引导完成时的回调Function-
mask是否启用蒙层，也可传入配置改变蒙层样式和填充色boolean | { style?: React.CSSProperties; color?: string; }true
type类型，影响底色与文字颜色default | primarydefault
open打开引导boolean-
onChange步骤改变时的回调，current 为当前的步骤(current: number) => void-
current当前处于哪一步number-
scrollIntoViewOptions是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数boolean | ScrollIntoViewOptionstrue5.2.0
indicatorsRender自定义指示器(current: number, total: number) => ReactNode-5.2.0
zIndexTour 的层级number10015.3.0

TourStep 引导步骤卡片

属性说明类型默认值版本
target获取引导卡片指向的元素，为空时居中于屏幕() => HTMLElement | HTMLElement-
arrow是否显示箭头，包含是否指向元素中心的配置boolean | { pointAtCenter: boolean}true
cover展示的图片或者视频ReactNode-
title标题ReactNode-
description主要描述部分ReactNode-
placement引导卡片相对于目标元素的位置left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRight bottom
onClose关闭引导时的回调函数Function-
mask是否启用蒙层，也可传入配置改变蒙层样式和填充色，默认跟随 Tour 的 mask 属性boolean | { style?: React.CSSProperties; color?: string; }true
type类型，影响底色与文字颜色default | primarydefault
nextButtonProps下一步按钮的属性{ children: ReactNode; onClick: Function }-
prevButtonProps上一步按钮的属性{ children: ReactNode; onClick: Function }-
scrollIntoViewOptions是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 scrollIntoViewOptions 属性boolean | ScrollIntoViewOptionstrue5.2.0