TDesign React

https://tdesign.tencent.com/react/
Admin
TDesign React is a comprehensive UI component library for React applications, offering a wide range...
Tokens:667,161
Snippets:2,849
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Custom popup guide

Source: https://tdesign.tencent.com/react/components/guide

This example shows a Guide component with a custom popup. It uses a Drawer and a custom popup content. The guide is triggered by a button and uses controlled current state. It handles change, prev, next, finish, and skip events.

```tsx
import React, { useEffect } from 'react';
import { ArrowUpIcon } from 'tdesign-icons-react';
import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';

import type { GuideProps, GuideStep } from 'tdesign-react';

const classStyles = `
<style>
.guide-container {
  max-width: 600px;
  padding: 40px;
}

.title-major {
  color: var(--td-text-color-primary);
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
}

.title-sub {
  margin-top: 8px;
  color: var(--td-text-color-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.field {
  margin-top: 50px;
}

.label {
  margin-bottom: 8px;
  color: var(--td-text-color-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.action {
  display: inline-flex;
  margin-top: 50px;
}

.action button:first-child {
  margin-right: 10px;
}

.dialog-body .img-wrapper {
  border-radius: var(--td-radius-default);
  overflow: hidden;
}

.dialog-body p {
  margin-top: 24px;
  color: var(--td-text-color-secondary);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  line-height: 22px;
}

.dialog-body .img-wrapper img {
  vertical-align: bottom;
  width: 100%;
}
</style>
`;

function DialogBody() {
  useEffect(() => {
    // 添加示例代码所需样式
    document.head.insertAdjacentHTML('beforeend', classStyles);
  }, []);

  return (
    <div className="dialog-body">
      <div className="img-wrapper">
        <img className="img" src="https://tdesign.gtimg.com/demo/demo-image-1.png" alt="demo" />
      </div>
      <p>此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。</p>
    </div>
  );
}

export default function PopupDialogGuide() {
  useEffect(() => {
    // 添加示例代码所需样式
    document.head.insertAdjacentHTML('beforeend', classStyles);
  }, []);

  const steps: GuideStep[] = [
    {
      element: '.main-title-popup-dialog',
      title: '新手引导标题',
      body: '新手引导的说明文案',
      placement: 'bottom-right',
    },
    {
      element: '.label-field-popup-dialog',
      title: '新手引导标题',
      body: DialogBody(),
      placement: 'bottom',
      mode: 'dialog',
    },
    {
      element: '.action-popup-dialog',
      title: '新手引导标题',
      body: '新手引导的说明文案',
      placement: 'right',
    },
  ];

  const [visible, setVisible] = React.useState(false);
  const [current, setCurrent] = React.useState(-1);

  const handleClick = () => {
    setVisible(true);
    setTimeout(() => {
      setCurrent(0);
    }, 800);
  };

  const handleChange: GuideProps['onChange'] = (current: number, { e, total }) => {
    setCurrent(current);
    console.log(current, e, total);
  };

  const handlePrevStepClick: GuideProps['onPrevStepClick'] = ({ e, prev, current, total }) => {
    console.log(e, prev, current, total);
  };

  const handleNextStepClick: GuideProps['onNextStepClick'] = ({ e, next, current, total }) => {
    console.log(e, next, current, total);
  };

  const handleFinish: GuideProps['onFinish'] = ({ e, current, total }) => {
    setVisible(false);
    console.log(e, current, total);
  };

  const handleSkip: GuideProps['onSkip'] = ({ e, current, total }) => {
    console.log('skip');
    setVisible(false);
    console.log(e, current, total);
  };

  return (
    <Row justify="center">
      <Button onClick={handleClick}>新手引导</Button>
      <Drawer
        footer={<Button onClick={() => setVisible(false)}> 关闭抽屉 </Button>}
        visible={visible}
        header="演示新手引导"
        size="60%"
        showOverlay={false}
        destroyOnClose={true}
      >
        <div className="guide-container">
          <div className="main-title-popup-dialog">
            <div className="title-major">Guide 用户引导</div>
            <div className="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
          </div>
          <div className="field label-field-popup-dialog">
            <div className="label">Label</div>
            <Input placeholder="请输入内容" />
          </div>
          <div className="field">
            <div className="label">Label</div>
            <Input placeholder="请输入内容" />
          </div>
          <Row className="action action-popup-dialog">
            <Button>确定</Button>
            <Button theme="default" variant="base">
              取消
            </Button>
          </Row>
        </div>

        <Guide
          current={current}
          steps={steps}
          onChange={handleChange}
          onPrevStepClick={handlePrevStepClick}
          onNextStepClick={handleNextStepClick}
          onFinish={handleFinish}
          onSkip={handleSkip}
        />
      </Drawer>
    </Row>
  );
}
```

--------------------------------

### Mixed popup and dialog guide with Drawer

Source: https://tdesign.tencent.com/react/components/guide

This example shows a Guide component that uses both popup and dialog modes. It is triggered by a button, opens a Drawer, and guides the user through steps. The dialog step uses a custom DialogBody component. The guide uses controlled current state and handles change, prev, next, finish, and skip events.

```tsx
import React, { useEffect } from 'react';
import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';

import type { GuideProps, GuideStep } from 'tdesign-react';

const classStyles = `
<style>
.guide-container {
  max-width: 600px;
  padding: 40px;
}

.title-major {
  color: var(--td-text-color-primary);
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
}

.title-sub {
  margin-top: 8px;
  color: var(--td-text-color-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.field {
  margin-top: 50px;
}

.label {
  margin-bottom: 8px;
  color: var(--td-text-color-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.action {
  display: inline-flex;
  margin-top: 50px;
}

.action button:first-child {
  margin-right: 10px;
}

.dialog-body .img-wrapper {
  border-radius: var(--td-radius-default);
  overflow: hidden;
}

.dialog-body p {
  margin-top: 24px;
  color: var(--td-text-color-secondary);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  line-height: 22px;
}

.dialog-body .img-wrapper img {
  vertical-align: bottom;
  width: 100%;
}
</style>
`;

function DialogBody() {
  useEffect(() => {
    // 添加示例代码所需样式
    document.head.insertAdjacentHTML('beforeend', classStyles);
  }, []);

  return (
    <div className="dialog-body">
      <div className="img-wrapper">
        <img className="img" src="https://tdesign.gtimg.com/demo/demo-image-1.png" alt="demo" />
      </div>
      <p>此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。</p>
    </div>
  );
}

export default function PopupDialogGuide() {
  useEffect(() => {
    // 添加示例代码所需样式
    document.head.insertAdjacentHTML('beforeend', classStyles);
  }, []);

  const steps: GuideStep[] = [
    {
      element: '.main-title-popup-dialog',
      title: '新手引导标题',
      body: '新手引导的说明文案',
      placement: 'bottom-right',
    },
    {
      element: '.label-field-popup-dialog',
      title: '新手引导标题',
      body: DialogBody(),
      placement: 'bottom',
      mode: 'dialog',
    },
    {
      element: '.action-popup-dialog',
      title: '新手引导标题',
      body: '新手引导的说明文案',
      placement: 'right',
    },
  ];

  const [visible, setVisible] = React.useState(false);
  const [current, setCurrent] = React.useState(-1);

  const handleClick = () => {
    setVisible(true);
    setTimeout(() => {
      setCurrent(0);
    }, 800);
  };

  const handleChange: GuideProps['onChange'] = (current: number, { e, total }) => {
    setCurrent(current);
    console.log(current, e, total);
  };

  const handlePrevStepClick: GuideProps['onPrevStepClick'] = ({ e, prev, current, total }) => {
    console.log(e, prev, current, total);
  };

  const handleNextStepClick: GuideProps['onNextStepClick'] = ({ e, next, current, total }) => {
    console.log(e, next, current, total);
  };

  const handleFinish: GuideProps['onFinish'] = ({ e, current, total }) => {
    setVisible(false);
    console.log(e, current, total);
  };

  const handleSkip: GuideProps['onSkip'] = ({ e, current, total }) => {
    console.log('skip');
    setVisible(false);
    console.log(e, current, total);
  };

  return (
    <Row justify="center">
      <Button onClick={handleClick}>新手引导</Button>
      <Drawer
        footer={<Button onClick={() => setVisible(false)}> 关闭抽屉 </Button>}
        visible={visible}
        header="演示新手引导"
        size="60%"
        showOverlay={false}
        destroyOnClose={true}
      >
        <div className="guide-container">
          <div className="main-title-popup-dialog">
            <div className="title-major">Guide 用户引导</div>
            <div className="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
          </div>
          <div className="field label-field-popup-dialog">
            <div className="label">Label</div>
            <Input placeholder="请输入内容" />
          </div>
          <div className="field">
            <div className="label">Label</div>
            <Input placeholder="请输入内容" />
          </div>
          <Row className="action action-popup-dialog">
            <Button>确定</Button>
            <Button theme="default" variant="base">
              取消
            </Button>
          </Row>
        </div>

        <Guide
          current={current}
          steps={steps}
          onChange={handleChange}
          onPrevStepClick={handlePrevStepClick}
          onNextStepClick={handleNextStepClick}
          onFinish={handleFinish}
          onSkip={handleSkip}
        />
      </Drawer>
    </Row>
  );
}
```

--------------------------------

### No Mask Guide Example (TSX)

Source: https://tdesign.tencent.com/react/components/guide

A React component that renders a button to open a drawer containing a Guide with no mask overlay. It defines steps targeting elements with specific class names, manages visibility and current step state, and handles guide events. The component also injects custom styles for the guide container.

```tsx
import React, { useEffect } from 'react';
import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';

import type { GuideProps, GuideStep } from 'tdesign-react';

const classStyles = `
<style>
.guide-container {
  max-width: 600px;
  padding: 40px;
}

.title-major {
  color: var(--td-text-color-primary);
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
}

.title-sub {
  margin-top: 8px;
  color: var(--td-text-color-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.field {
  margin-top: 50px;
}

.label {
  margin-bottom: 8px;
  color: var(--td-text-color-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.action {
  display: inline-flex;
  margin-top: 50px;
}

.action button:first-child {
  margin-right: 10px;
}

</style>
`;

export default function NoMaskGuide() {
  useEffect(() => {
    // 添加示例代码所需样式
    document.head.insertAdjacentHTML('beforeend', classStyles);
  }, []);

  const steps: GuideStep[] = [
    {
      element: '.main-title-no-mask',
      title: '新手引导标题',
      body: '新手引导的说明文案',
      placement: 'bottom-right',
    },
    {
      element: '.label-field-no-mask',
      title: '新手引导标题',
      body: '新手引导的说明文案',
      placement: 'bottom',
    },
    {
      element: '.action-no-mask',
      title: '新手引导标题',
      body: '新手引导的说明文案',
      placement: 'right',
    },
  ];

  const [visible, setVisible] = React.useState(false);
  const [current, setCurrent] = React.useState(-1);

  const handleClick = () => {
    setVisible(true);
    setTimeout(() => {
      setCurrent(0);
    }, 800);
  };

  const handleChange: GuideProps['onChange'] = (current: number, { e, total }) => {
    setCurrent(current);
    console.log(current, e, total);
  };

  const handlePrevStepClick: GuideProps['onPrevStepClick'] = ({ e, prev, current, total }) => {
    console.log(e, prev, current, total);
  };

  const handleNextStepClick: GuideProps['onNextStepClick'] = ({ e, next, current, total }) => {
    console.log(e, next, current, total);
  };

  const handleFinish: GuideProps['onFinish'] = ({ e, current, total }) => {
    setVisible(false);
    console.log(e, current, total);
  };

  const handleSkip: GuideProps['onSkip'] = ({ e, current, total }) => {
    console.log('skip');
    setVisible(false);
    console.log(e, current, total);
  };

  return (
    <Row justify="center">
      <Button onClick={handleClick}>新手引导</Button>
      <Drawer
        footer={<Button onClick={() => setVisible(false)}> 关闭抽屉 </Button>}
        visible={visible}
        header="演示新手引导"
        size="60%"
        showOverlay={false}
        destroyOnClose={true}
      >
        <div className="guide-container">
          <div className="main-title-no-mask">
            <div className="title-major">Guide 用户引导</div>
            <div className="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
          </div>
          <div className="field label-field-no-mask">
            <div className="label">Label</div>
            <Input placeholder="请输入内容" />
          </div>
          <div className="field">
            <div className="label">Label</div>
            <Input placeholder="请输入内容" />
          </div>
          <Row className="action action-no-mask">
            <Button>确定</Button>
            <Button theme="default" variant="base">
              取消
            </Button>
          </Row>
        </div>

        <Guide
          current={current}
          steps={steps}
          showOverlay={false}
          onChange={handleChange}
          onPrevStepClick={handlePrevStepClick}
          onNextStepClick={handleNextStepClick}
          onFinish={handleFinish}
          onSkip={handleSkip}
        />
      </Drawer>
    </Row>
  );
}
```

--------------------------------

### Guide Props

Source: https://tdesign.tencent.com/react/components/guide

Properties for the Guide component, including configuration for steps, buttons, overlay, and event callbacks.

```APIDOC
## Guide Props

### Description
Properties for the Guide component, including configuration for steps, buttons, overlay, and event callbacks.

### Properties

- **className** (String) - Optional - 类名
- **style** (Object) - Optional - 样式，TS 类型：`React.CSSProperties`
- **counter** (TElement) - Optional - 用于自定义渲染计数部分。TS 类型：`TNode<{ current: number; total: number }>`
- **current** (Number) - Optional - 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景
- **defaultCurrent** (Number) - Optional - 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景。非受控属性
- **finishButtonProps** (Object) - Optional - 透传 完成 的全部属性，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps`
- **hideCounter** (Boolean) - Optional - 是否隐藏计数，默认值：false
- **hidePrev** (Boolean) - Optional - 是否隐藏上一步按钮，默认值：false
- **hideSkip** (Boolean) - Optional - 是否隐藏跳过按钮，默认值：false
- **highlightPadding** (Number) - Optional - 高亮框的内边距，默认值：8
- **mode** (String) - Optional - 引导框的类型。可选项：popup/dialog，默认值：popup
- **nextButtonProps** (Object) - Optional - 透传 下一步按钮 的全部属性，示例：{ content: '下一步', theme: 'primary' }。TS 类型：`ButtonProps`
- **prevButtonProps** (Object) - Optional - 透传 上一步按钮 的全部属性，示例：{ content: '上一步', theme: 'default' }。TS 类型：`ButtonProps`
- **showOverlay** (Boolean) - Optional - 是否出现遮罩层，默认值：true
- **skipButtonProps** (Object) - Optional - 透传 跳过按钮 的全部属性，{ content: '跳过', theme: 'default' }。TS 类型：`ButtonProps`
- **steps** (Array) - Optional - 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。TS 类型：`Array<GuideStep>`
- **zIndex** (Number) - Optional - 提示框的层级，默认值：999999

### Events

- **onChange** (Function) - Optional - TS 类型：`(current: number, context?: { e: MouseEvent,  total: number }) => void`<br/>当前步骤发生变化时触发
- **onFinish** (Function) - Optional - TS 类型：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/>点击完成按钮时触发
- **onNextStepClick** (Function) - Optional - TS 类型：`(context: { e: MouseEvent, next: number, current: number, total: number  }) => void`<br/>点击下一步时触发
- **onPrevStepClick** (Function) - Optional - TS 类型：`(context: { e: MouseEvent, prev: number, current: number, total: number  }) => void`<br/>点击上一步时触发
- **onSkip** (Function) - Optional - TS 类型：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/>点击跳过按钮时触发
```

--------------------------------

### GuideStep

Source: https://tdesign.tencent.com/react/components/guide

Configuration object for each step in the Guide component, defining the highlighted element, content, placement, and button overrides.

```APIDOC
## GuideStep

### Description
Configuration object for each step in the Guide component, defining the highlighted element, content, placement, and button overrides.

### Properties

- **body** (TNode) - Optional - 当前步骤提示框的内容。TS 类型：`string \| TNode`
- **children** (TNode) - Optional - 自定义内容，同 content。TS 类型：`string \| TNode`
- **content** (TElement) - Optional - 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效）。TS 类型：`TNode`
- **element** (String / Function) - Required - 必需。高亮的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'#tdesign' 或 () => document.querySelector('#tdesign')。TS 类型：`AttachNode`
- **highlightContent** (TElement) - Optional - 用户自定义的高亮框 (仅当 `mode` 为 `popup` 时生效)。TS 类型：`TNode`
- **highlightPadding** (Number) - Optional - 高亮框的内边距
- **mode** (String) - Optional - 引导框的类型。可选项：popup/dialog
- **nextButtonProps** (Object) - Optional - 用于自定义当前引导框的下一步按钮的内容。TS 类型：`ButtonProps`
- **offset** (Array) - Optional - 【讨论确认中】相对于 placement 的偏移量，示例：[-10, 20] 或 ['10px', '8px']。TS 类型：`Array<string \| number>`
- **placement** (String) - Optional - 引导框相对于高亮元素出现的位置。TS 类型：`StepPopupPlacement \| StepDialogPlacement`，默认值：'top'
- **popupProps** (Object) - Optional - 透传全部属性到 Popup 组件。`mode=popup` 时有效。TS 类型：`PopupProps`
- **prevButtonProps** (Object) - Optional - 用于自定义当前引导框的上一步按钮的内容。TS 类型：`ButtonProps`
- **showOverlay** (Boolean) - Optional - 是否出现遮罩层，默认值：true
- **skipButtonProps** (Object) - Optional - 用于自定义当前步骤引导框的跳过按钮的内容。TS 类型：`ButtonProps`
- **stepOverlayClass** (String) - Optional - 覆盖引导框的类名
- **title** (String) - Optional - 当前步骤的标题内容
```

--------------------------------

### 弹窗形式的引导 (DialogGuide)

Source: https://tdesign.tencent.com/react/components/guide

使用 TDesign React 的 Guide 组件，通过 mode="dialog" 实现弹窗引导。示例包含步骤配置、事件处理（onChange、onPrevStepClick、onNextStepClick、onFinish、onSkip）以及通过 Drawer 展示引导内容。

```tsx
import React, { useEffect } from 'react';
import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';

import type { GuideProps } from 'tdesign-react';

const classStyles = `
<style>
.guide-container {
  max-width: 600px;
  padding: 40px;
}

.title-major {
  color: var(--td-text-color-primary);
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
}

.title-sub {
  margin-top: 8px;
  color: var(--td-text-color-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.field {
  margin-top: 50px;
}

.label {
  margin-bottom: 8px;
  color: var(--td-text-color-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.action {
  display: inline-flex;
  margin-top: 50px;
}

.action button:first-child {
  margin-right: 10px;
}

/* dialog body */

.dialog-img {
  width: 100%;
}

p {
  margin-top: 16px;
  color: var(--td-text-color-secondary);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  line-height: 22px;
}

.dialog-body .img-wrapper {
  border-radius: var(--td-radius-default);
  overflow: hidden;
}

.dialog-body p {
  margin-top: 24px;
  color: var(--td-text-color-secondary);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  line-height: 22px;
}

.dialog-body .img-wrapper img {
  vertical-align: bottom;
  width: 100%;
}
</style>
`;

function DialogBody() {
  useEffect(() => {
    // 添加示例代码所需样式
    document.head.insertAdjacentHTML('beforeend', classStyles);
  }, []);

  return (
    <div className="dialog-body">
      <div className="img-wrapper">
        <img className="img" src="https://tdesign.gtimg.com/demo/demo-image-1.png" alt="demo" />
      </div>
      <p>此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。</p>
    </div>
  );
}

export default function DialogGuide() {
  useEffect(() => {
    // 添加示例代码所需样式
    document.head.insertAdjacentHTML('beforeend', classStyles);
  }, []);

  const steps: GuideProps['steps'] = [
    {
      element: '.main-title-dialog',
      title: '新手引导标题',
      body: DialogBody(),
      placement: 'bottom-right',
    },
    {
      element: '.label-field-dialog',
      title: '新手引导标题',
      body: DialogBody(),
      placement: 'bottom',
    },
    {
      element: '.action-dialog',
      title: '新手引导标题',
      body: DialogBody(),
      placement: 'right',
    },
  ];

  const [visible, setVisible] = React.useState(false);
  const [current, setCurrent] = React.useState(-1);

  const handleClick = () => {
    setVisible(true);
    setTimeout(() => {
      setCurrent(0);
    }, 800);
  };

  const handleChange: GuideProps['onChange'] = (current: number, { e, total }) => {
    setCurrent(current);
    console.log(current, e, total);
  };

  const handlePrevStepClick: GuideProps['onPrevStepClick'] = ({ e, prev, current, total }) => {
    console.log(e, prev, current, total);
  };

  const handleNextStepClick: GuideProps['onNextStepClick'] = ({ e, next, current, total }) => {
    console.log(e, next, current, total);
  };

  const handleFinish: GuideProps['onFinish'] = ({ e, current, total }) => {
    setVisible(false);
    console.log(e, current, total);
  };

  const handleSkip: GuideProps['onSkip'] = ({ e, current, total }) => {
    console.log('skip');
    setVisible(false);
    console.log(e, current, total);
  };

  return (
    <Row justify="center">
      <Button onClick={handleClick}>新手引导</Button>
      <Drawer
        footer={<Button onClick={() => setVisible(false)}> 关闭抽屉 </Button>}
        visible={visible}
        header="演示新手引导"
        size="60%"
        showOverlay={false}
        destroyOnClose={true}
      >
        <div className="guide-container">
          <div className="main-title-dialog">
            <div className="title-major">Guide 用户引导</div>
            <div className="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
          </div>
          <div className="field label-field-dialog">
            <div className="label">Label</div>
            <Input placeholder="请输入内容" />
          </div>
          <div className="field">
            <div className="label">Label</div>
            <Input placeholder="请输入内容" />
          </div>
          <Row className="action action-dialog">
            <Button>确定</Button>
            <Button theme="default" variant="base">
              取消
            </Button>
          </Row>
        </div>

        <Guide
          current={current}
          steps={steps}
          mode="dialog"
          onChange={handleChange}
          onPrevStepClick={handlePrevStepClick}
          onNextStepClick={handleNextStepClick}
          onFinish={handleFinish}
          onSkip={handleSkip}
        />
      </Drawer>
    </Row>
  );
}

```

--------------------------------

### 使用 tdesign-starter-cli 初始化项目

Source: https://tdesign.tencent.com/react/quick-start

初始化 TDesign Starter 项目：先全局安装 tdesign-starter-cli，再运行 td-starter init 创建项目。

```bash
## 1、安装 tdesign-starter-cli
npm i tdesign-starter-cli@latest -g

## 2、创建项目
td-starter init
```

--------------------------------

### Form.useWatch example: watch a field value

Source: https://tdesign.tencent.com/react/components/form?tab=api

Shows how to use Form.useWatch to get the current value of a field ('username') from a form instance created with Form.useForm. The watched value updates as the field changes.

```jsx
const Demo = () => {
  const [form] = Form.useForm();
  const userName = Form.useWatch('username', form);

  return (
    <Form form={form}>
      <FormItem name="username">
        <Input />
      </FormItem>
    </Form>
  );
};

```

--------------------------------

### DrawerInstance.show()

Source: https://tdesign.tencent.com/react/components/drawer

Shows the drawer instance.

```APIDOC
## DrawerInstance.show()

### Description
Shows the drawer instance.

### Method
Function call

### Parameters
None

### Returns
None
```

--------------------------------

### Modal and Modeless Dialog Example

Source: https://tdesign.tencent.com/react/components/dialog

Demonstrates how to create modal and modeless dialogs with optional draggable behavior using TDesign React. Use this example to understand the different dialog modes and their configurations.

```tsx
import React, { useState } from 'react';
import { Button, Dialog, Space } from 'tdesign-react';

export default function NotModalExample() {
  const [modal, setModal] = useState(false);
  const [draggableModal, setDraggableModal] = useState(false);
  const [draggableModeless, setDraggableModeless] = useState(false);
  const [modeless, setModeless] = useState(false);

  return (
    <>
      <Space>
        <Button theme="primary" onClick={() => setModal(true)}>
          普通对话框（不可拖拽）
        </Button>
        <Button theme="primary" variant="outline" onClick={() => setDraggableModal(true)}>
          普通对话框（可拖拽）
        </Button>
        <Button theme="primary" onClick={() => setModeless(true)}>
          非模态对话框（不可拖拽）
        </Button>
        <Button theme="primary" variant="outline" onClick={() => setDraggableModeless(true)}>
          非模态对话框（可拖拽）
        </Button>
      </Space>

      <Dialog header="普通对话框（不可拖拽）" visible={modal} onClose={() => setModal(false)}>
        <p>This is a dialog</p>
      </Dialog>

      <Dialog header="普通对话框（可拖拽）" draggable visible={draggableModal} onClose={() => setDraggableModal(false)}>
        <p>This is a dialog</p>
      </Dialog>

      <Dialog mode="modeless" header="非模态对话框（不可拖拽）" visible={modeless} onClose={() => setModeless(false)}>
        <p>This is a dialog</p>
      </Dialog>
      <Dialog
        mode="modeless"
        header="非模态对话框（可拖拽）"
        draggable
        visible={draggableModeless}
        onClose={() => setDraggableModeless(false)}
      >
        <p>This is a dialog</p>
      </Dialog>
    </>
  );
}
```

--------------------------------

### Calendar cell slot example

Source: https://tdesign.tencent.com/react/components/Calendar

Uses the cell prop to completely customize the content of each calendar cell. The example displays the day number and conditionally shows tags for events on the 15th of the month or August.

```tsx
import React from 'react';
import dayjs from 'dayjs';
import { Calendar, Space, Tag } from 'tdesign-react';

import type { CalendarCell } from 'tdesign-react';

type TagTheme = 'default' | 'danger' | 'warning' | 'success' | 'primary';

interface DataList {
  label: string;
  value: TagTheme;
}

export default function CalendarExample() {
  const displayNum = React.useCallback((date: CalendarCell) => {
    if (date.mode === 'month') {
      return date.date.getDate();
    }
    return date.date.getMonth() + 1;
  }, []);

  const isShow = (data: CalendarCell) =>
    data.mode === 'month' ? dayjs(data.formattedDate).date() === 15 : dayjs(data.formattedDate).month() === 7;

  const dataList: DataList[] = [
    {
      value: 'danger',
      label: '错误事件',
    },
    {
      value: 'warning',
      label: '警告事件',
    },
    {
      value: 'success',
      label: '正常事件',
    },
  ];

  return (
    <Calendar
      cell={(cellData) => (
        <div style={{ width: '100%' }}>
          <div>{displayNum(cellData)}</div>
          {isShow(cellData) && (
            <Space direction="vertical" size={2}>
              {dataList.map((item, index) => (
                <Tag key={index} theme={item.value}>
                  {item.label}
                </Tag>
              ))}
            </Space>
          )}
        </div>
      )}
    />
  );
}
```

--------------------------------

### Calendar cellAppend slot example

Source: https://tdesign.tencent.com/react/components/Calendar

Uses the cellAppend prop to append extra content to calendar cells. The example shows tags for special dates (anniversary and family gathering) based on the current date.

```tsx
import React from 'react';
import dayjs from 'dayjs';
import { Calendar, Tag } from 'tdesign-react';

import type { CalendarCell } from 'tdesign-react';

export default function CalendarExample() {
  const getShow = (data: CalendarCell) =>
    data.mode === 'month'
      ? dayjs().format('YYYY-MM-DD') === data.formattedDate
      : data.date.getMonth() === new Date().getMonth();

  return (
    <Calendar
      cellAppend={(cellData) =>
        getShow(cellData) && (
          <div className="cell-append-demo-outer">
            <Tag theme="success" variant="light" size="small" className="activeTag" style={{ width: '100%' }}>
              {cellData.mode === 'month' ? '我们的纪念日' : '我们的纪念月'}
            </Tag>
            <Tag theme="warning" variant="light" size="small" className="activeTag" style={{ width: '100%' }}>
              {cellData.mode === 'month' ? '家庭聚会' : '家庭聚会'}
            </Tag>
          </div>
        )
      }
    />
  );
}
```

--------------------------------

### DialogInstance.show()

Source: https://tdesign.tencent.com/react/components/dialog

Shows the dialog instance.

```APIDOC
## DialogInstance.show()

### Description
Shows the dialog instance.

### Method
show()

### Parameters
None

### Returns
None

### Example
```tsx
myDialog.show();
```
```

--------------------------------

### 基本引导示例

Source: https://tdesign.tencent.com/react/components/guide

展示 Guide 组件的基本用法，包括定义步骤、控制显示、处理事件回调等。

```tsx
import React, { useEffect } from 'react';
import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';

import type { GuideProps, GuideStep } from 'tdesign-react';

const classStyles = `
<style>
.guide-container {
  max-width: 600px;
  padding: 40px;
}

.title-major {
  color: var(--td-text-color-primary);
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
}

.title-sub {
  margin-top: 8px;
  color: var(--td-text-color-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.field {
  margin-top: 50px;
}

.label {
  margin-bottom: 8px;
  color: var(--td-text-color-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.action {
  display: inline-flex;
  margin-top: 50px;
}

.action button:first-child {
  margin-right: 10px;
}
</style>
`;

export default function BasicGuide() {
  useEffect(() => {
    // 添加示例代码所需样式
    document.head.insertAdjacentHTML('beforeend', classStyles);
  }, []);

  const steps: GuideStep[] = [
    {
      element: '.main-title-base',
      title: '新手引导标题',
      body: '新手引导的说明文案',
      placement: 'bottom-right',
      stepOverlayClass: 't-test-guide-step-overlay',
      popupProps: {
        overlayStyle: { fontWeight: 'normal' },
        overlayInnerStyle: { padding: '4px', height: '128px' },
        overlayClassName: 'guide-custom-overlay-class',
        overlayInnerClassName: 'guide-custom-overlay-inner-class',
      },
    },
    {
      element: '.label-field-base',
      title: '新手引导标题',
      body: '新手引导的说明文案',
      placement: 'bottom',
    },
    {
      element: '.action-base',
      title: '新手引导标题',
      body: '新手引导的说明文案',
      placement: 'right',
    },
  ];

  const [visible, setVisible] = React.useState(false);
  const [current, setCurrent] = React.useState(-1);

  const handleClick = () => {
    setVisible(true);
    setTimeout(() => {
      setCurrent(0);
    }, 800);
  };

  const handleChange: GuideProps['onChange'] = (current: number, { e, total }) => {
    setCurrent(current);
    console.log(current, e, total);
  };

  const handlePrevStepClick: GuideProps['onPrevStepClick'] = ({ e, prev, current, total }) => {
    console.log(e, prev, current, total);
  };

  const handleNextStepClick: GuideProps['onNextStepClick'] = ({ e, next, current, total }) => {
    console.log(e, next, current, total);
  };

  const handleFinish: GuideProps['onFinish'] = ({ e, current, total }) => {
    setVisible(false);
    console.log(e, current, total);
  };

  const handleSkip: GuideProps['onSkip'] = ({ e, current, total }) => {
    console.log('skip');
    setVisible(false);
    console.log(e, current, total);
  };

  return (
    <Row justify="center">
      <Button onClick={handleClick}>新手引导</Button>
      <Drawer
        footer={<Button onClick={() => setVisible(false)}> 关闭抽屉 </Button>}
        visible={visible}
        header="演示新手引导"
        size="60%"
        showOverlay={false}
        destroyOnClose={true}
      >
        <div className="guide-container">
          <div className="main-title-base">
            <div className="title-major">Guide 用户引导</div>
            <div className="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
          </div>
          <div className="field label-field-base">
            <div className="label">Label</div>
            <Input placeholder="请输入内容" />
          </div>
          <div className="field">
            <div className="label">Label</div>
            <Input placeholder="请输入内容" />
          </div>
          <Row className="action action-base">
            <Button>确定</Button>
            <Button theme="default" variant="base">
              取消
            </Button>
          </Row>
        </div>

        <Guide
          current={current}
          steps={steps}
          onChange={handleChange}
          onPrevStepClick={handlePrevStepClick}
          onNextStepClick={handleNextStepClick}
          onFinish={handleFinish}
          onSkip={handleSkip}
        />
      </Drawer>
    </Row>
  );
}
```
Tokens:
Raw