- {showArrow && }
+ {showArrow && (
+
+ )}
{Array.isArray(children) ? children[1] : ''}
{list.map((item, index) => {
return (
diff --git a/src/packages/switch/switch.taro.tsx b/src/packages/switch/switch.taro.tsx
index 1634b499f3..042d746917 100644
--- a/src/packages/switch/switch.taro.tsx
+++ b/src/packages/switch/switch.taro.tsx
@@ -27,6 +27,7 @@ export const Switch: FunctionComponent> = (props) => {
className,
style,
onChange,
+ ...rest
} = {
...defaultProps,
...props,
@@ -50,7 +51,12 @@ export const Switch: FunctionComponent> = (props) => {
setValue(!value)
}
return (
-
onClick(e)} style={style}>
+
onClick(e)}
+ style={style}
+ {...rest}
+ >
{!value && }
{activeText && (
diff --git a/src/packages/switch/switch.tsx b/src/packages/switch/switch.tsx
index 1634b499f3..042d746917 100644
--- a/src/packages/switch/switch.tsx
+++ b/src/packages/switch/switch.tsx
@@ -27,6 +27,7 @@ export const Switch: FunctionComponent> = (props) => {
className,
style,
onChange,
+ ...rest
} = {
...defaultProps,
...props,
@@ -50,7 +51,12 @@ export const Switch: FunctionComponent> = (props) => {
setValue(!value)
}
return (
- {
+ setShowTour3(true)
+ }}
+ />
+ }
+ />
+
+
+
+ )
+}
+export default App;
+```
+
+:::
+
+### 步骤引导
+
+:::demo
+
+```tsx
+import React, { useState } from "react";
+import { Cell, Tour, Tabbar } from '@nutui/nutui-react-taro';
+
+const App = () => {
+ const [showTour, setShowTour] = useState(false)
+
+ const closeTour = () => {
+ setShowTour(false)
+ }
+
+ const steps = [
+ {
+ content: '70+ 高质量组件，覆盖移动端主流场景',
+ target: 'target4',
+ },
+ {
+ content: '支持一套代码同时开发多端小程序+H5',
+ target: 'target5',
+ },
+ {
+ content: '基于京东APP 10.0 视觉规范',
+ target: 'target6',
+ location: 'top-end',
+ },
+ {
+ content: '支持定制主题，内置 700+ 个主题变量',
+ target: 'target7',
+ location: 'top-end',
+ },
+ ]
+
+ return (
+ <>
+ {
+ setShowTour(true)
+ }}
+ />
+
+
+ ) => void` | `-` |
+| onChange | 切换步骤时触发 | `(value: number) => void` | `-` |
+
+### ListOptions
+
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| target | 目标对象 | `Element` \| `string` | `-` |
+| content | 气泡层内容 | `string` | `-` |
+| location | 弹出层位置 | `string` | `-` |
+| popoverOffset | 气泡层偏移量 | `number[]` | `-` |
+| arrowOffset | 小箭头的偏移量 | `number` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-tour-mask-border-radius | 遮罩层的border-radius值 | `10px` |
+| \--nutui-tour-content-min-width | 内容区的min-width值 | `200px` |
+| \--nutui-tour-content-padding | 内容区的padding值 | `10px 12px` |
+| \--nutui-tour-content-inner-margin | 内容区内部的margin值 | `10px 0px` |
+| \--nutui-tour-content-inner-font-size | 内容区内部的font-size值 | `14px` |
+| \--nutui-tour-content-bottom-margin-top | 内容区底部的margin-top值 | `10px` |
+| \--nutui-tour-content-bottom-btn-margin-left | 内容区底部按钮的margin-left值 | `4px` |
+| \--nutui-tour-content-bottom-btn-padding | 内容区底部按钮的padding值 | `2px 4px` |
+| \--nutui-tour-content-bottom-btn-font-size | 内容区底部按钮的font-size值 | `12px` |
+| \--nutui-tour-content-bottom-btn-border-radius | 内容区底部按钮的border-radius值 | `4px` |
+
+
+
+
+
diff --git a/src/packages/tour/index.taro.ts b/src/packages/tour/index.taro.ts
new file mode 100644
index 0000000000..23c4fccbe4
--- /dev/null
+++ b/src/packages/tour/index.taro.ts
@@ -0,0 +1,5 @@
+import { Tour } from './tour.taro'
+
+export type { ListOptions, TourType, TourProps } from './tour.taro'
+
+export default Tour
diff --git a/src/packages/tour/index.ts b/src/packages/tour/index.ts
new file mode 100644
index 0000000000..4927f6746a
--- /dev/null
+++ b/src/packages/tour/index.ts
@@ -0,0 +1,5 @@
+import { Tour } from './tour'
+
+export type { ListOptions, TourType, TourProps } from './tour'
+
+export default Tour
diff --git a/src/packages/tour/tour.scss b/src/packages/tour/tour.scss
new file mode 100644
index 0000000000..fdc83a5e80
--- /dev/null
+++ b/src/packages/tour/tour.scss
@@ -0,0 +1,78 @@
+.nut-tour {
+ &-mask {
+ position: fixed;
+ box-shadow: 0px 0px 0px 150vh rgba(0, 0, 0, 0.5);
+ border-radius: $tour-mask-border-radius;
+ z-index: 999;
+ &-none {
+ box-shadow: none;
+ }
+
+ &-hidden {
+ opacity: 0;
+ }
+ }
+
+ &-content {
+ display: block;
+ padding: $tour-content-padding;
+ min-width: $tour-content-min-width;
+ box-sizing: content-box;
+
+ &-top {
+ display: block;
+ text-align: right;
+
+ &-close {
+ --nut-icon-width: 10px;
+ --nut-icon-height: 10px;
+ }
+ }
+
+ &-inner {
+ margin: $tour-content-inner-margin;
+ font-size: $tour-content-inner-font-size;
+ white-space: nowrap;
+ }
+
+ &-bottom {
+ margin-top: $tour-content-bottom-margin-top;
+ display: flex;
+ justify-content: space-between;
+ &-operate {
+ display: flex;
+ justify-content: flex-end;
+ &-btn {
+ display: inline-block;
+ border: 1px solid $disable-color;
+ margin-left: $tour-content-bottom-btn-margin-left;
+ padding: $tour-content-bottom-btn-padding;
+ font-size: $tour-content-bottom-btn-font-size;
+ border-radius: $tour-content-bottom-btn-border-radius;
+ color: $text-color;
+ &.active {
+ color: #fff;
+ border: 0;
+ background: $primary-color;
+ }
+ }
+ }
+ }
+
+ &-tile {
+ .nut-tour-content-inner {
+ margin: 0;
+ }
+ }
+ }
+
+ &-masked {
+ position: fixed;
+ width: 100vh;
+ height: 100vh;
+ z-index: 1000;
+ top: 0;
+ left: 0;
+ background: transparent;
+ }
+}
diff --git a/src/packages/tour/tour.taro.tsx b/src/packages/tour/tour.taro.tsx
new file mode 100644
index 0000000000..8833617a98
--- /dev/null
+++ b/src/packages/tour/tour.taro.tsx
@@ -0,0 +1,268 @@
+import React, { useState, useEffect, ReactNode, FunctionComponent } from 'react'
+import type { MouseEvent } from 'react'
+import { Close } from '@nutui/icons-react-taro'
+import classNames from 'classnames'
+import Popover, { PopoverLocation } from '@/packages/popover/index.taro'
+import { getTaroRectById } from '@/utils/use-taro-rect'
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { useConfig } from '@/packages/configprovider'
+
+export interface ListOptions {
+ target: Element | string
+ content?: string
+ location?: string
+ popoverOffset?: number[]
+ arrowOffset?: number
+}
+
+export type TourType = 'step' | 'tile'
+
+export interface TourProps extends BasicComponent {
+ visible: boolean
+ type: TourType
+ location: PopoverLocation | string
+ mask: boolean
+ maskWidth: number | string
+ maskHeight: number | string
+ offset: number[]
+ list: ListOptions[]
+ title: ReactNode
+ next: ReactNode
+ prev: ReactNode
+ complete: ReactNode
+ showPrev: boolean
+ closeOnOverlayClick: boolean
+ onClose: (e: MouseEvent) => void
+ onChange: (value: number) => void
+}
+const defaultProps = {
+ ...ComponentDefaults,
+ visible: false,
+ type: 'step',
+ location: 'bottom',
+ mask: true,
+ maskWidth: '',
+ maskHeight: '',
+ offset: [8, 10],
+ title: '',
+ next: '',
+ prev: '',
+ complete: '',
+ showPrev: true,
+ closeOnOverlayClick: true,
+} as TourProps
+
+const classPrefix = 'nut-tour'
+export const Tour: FunctionComponent<
+ Partial &
+ Omit, 'title' | 'onChange'>
+> = (props) => {
+ const { locale } = useConfig()
+ const {
+ children,
+ className,
+ title,
+ closeOnOverlayClick,
+ showPrev,
+ list,
+ type,
+ location,
+ visible,
+ mask,
+ maskWidth,
+ maskHeight,
+ offset,
+ next,
+ prev,
+ complete,
+ onClose,
+ onChange,
+ ...rest
+ } = {
+ ...defaultProps,
+ ...props,
+ }
+
+ const [showTour, setShowTour] = useState(false)
+ const [showPopup, setShowPopup] = useState(false)
+ const [active, setActive] = useState(0)
+
+ const [maskRect, setMaskRect] = useState({
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ width: 0,
+ height: 0,
+ })
+
+ const classes = classNames(className, classPrefix)
+
+ useEffect(() => {
+ if (visible) {
+ getRootPosition()
+ }
+ setActive(0)
+ setShowTour(visible)
+ setShowPopup(visible)
+ }, [visible])
+
+ useEffect(() => {
+ if (visible) {
+ setShowPopup(true)
+ getRootPosition()
+ }
+ }, [active])
+
+ const getRootPosition = () => {
+ getTaroRectById(list[active].target as string).then((rect: any) => {
+ console.log('rect', rect)
+ setMaskRect({
+ top: rect.top,
+ left: rect.left,
+ right: rect.right,
+ bottom: rect.bottom,
+ width: rect.width,
+ height: rect.height,
+ })
+ })
+ }
+
+ const maskStyle = () => {
+ const { width, height, left, top } = maskRect
+ const center = [left + width / 2, top + height / 2] // 中心点 【横，纵】
+ const w = Number(maskWidth || width)
+ const h = Number(maskHeight || height)
+ const styles = {
+ width: `${w + +offset[1] * 2}px`,
+ height: `${h + +offset[0] * 2}px`,
+ top: `${center[1] - h / 2 - +offset[0]}px`,
+ left: `${center[0] - w / 2 - +offset[1]}px`,
+ }
+ return styles
+ }
+
+ const maskClose = (e: MouseEvent) => {
+ setShowTour(false)
+ setShowPopup(false)
+
+ onClose && onClose(e)
+ }
+
+ const handleClickMask = (e: MouseEvent) => {
+ closeOnOverlayClick && maskClose(e)
+ }
+
+ const changeStep = (type: string) => {
+ if (type === 'next') {
+ setActive(active + 1)
+ onChange && onChange(active + 1)
+ } else {
+ setActive(active - 1)
+ onChange && onChange(active - 1)
+ }
+ setShowPopup(false)
+ }
+
+ return (
+ ) => void
+ onChange: (value: number) => void
+}
+const defaultProps = {
+ ...ComponentDefaults,
+ visible: false,
+ type: 'step',
+ location: 'bottom',
+ mask: true,
+ maskWidth: '',
+ maskHeight: '',
+ offset: [8, 10],
+ title: '',
+ next: '',
+ prev: '',
+ complete: '',
+ showPrev: true,
+ closeOnOverlayClick: true,
+} as TourProps
+
+const classPrefix = 'nut-tour'
+export const Tour: FunctionComponent<
+ Partial &
+ Omit, 'title' | 'onChange'>
+> = (props) => {
+ const { locale } = useConfig()
+ const {
+ children,
+ className,
+ title,
+ closeOnOverlayClick,
+ showPrev,
+ list,
+ type,
+ location,
+ visible,
+ mask,
+ maskWidth,
+ maskHeight,
+ offset,
+ next,
+ prev,
+ complete,
+ onClose,
+ onChange,
+ ...rest
+ } = {
+ ...defaultProps,
+ ...props,
+ }
+
+ const [showTour, setShowTour] = useState(false)
+ const [showPopup, setShowPopup] = useState(false)
+ const [active, setActive] = useState(0)
+
+ const [maskRect, setMaskRect] = useState({
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ width: 0,
+ height: 0,
+ })
+
+ const classes = classNames(className, classPrefix)
+
+ useEffect(() => {
+ if (visible) {
+ getRootPosition()
+ }
+ setActive(0)
+ setShowTour(visible)
+ setShowPopup(visible)
+ }, [visible])
+
+ useEffect(() => {
+ if (visible) {
+ setShowPopup(true)
+ getRootPosition()
+ }
+ }, [active])
+
+ const getRootPosition = () => {
+ const el: any = document.querySelector(`#${list[active].target}`)
+ const rect = getRect(el)
+ setMaskRect(rect)
+ }
+
+ const maskStyle = () => {
+ const { width, height, left, top } = maskRect
+ const center = [left + width / 2, top + height / 2] // 中心点 【横，纵】
+ const w = Number(maskWidth || width)
+ const h = Number(maskHeight || height)
+ const styles = {
+ width: `${w + +offset[1] * 2}px`,
+ height: `${h + +offset[0] * 2}px`,
+ top: `${center[1] - h / 2 - +offset[0]}px`,
+ left: `${center[0] - w / 2 - +offset[1]}px`,
+ }
+ return styles
+ }
+
+ const maskClose = (e: MouseEvent) => {
+ setShowTour(false)
+ setShowPopup(false)
+
+ onClose && onClose(e)
+ }
+
+ const handleClickMask = (e: MouseEvent) => {
+ closeOnOverlayClick && maskClose(e)
+ }
+
+ const changeStep = (type: string) => {
+ if (type === 'next') {
+ setActive(active + 1)
+ onChange && onChange(active + 1)
+ } else {
+ setActive(active - 1)
+ onChange && onChange(active - 1)
+ }
+ setShowPopup(false)
+ }
+
+ return (
+ | |
onClick(e)} style={style}>
+ {
+ setShowTour3(true)
+ }}
+ />
+ }
+ />
+
+
+
+ )
+}
+export default App;
+```
+
+:::
+
+### 步骤引导
+
+:::demo
+
+```tsx
+import React, { useState } from "react";
+import { Cell, Tour, Tabbar } from '@nutui/nutui-react';
+
+const App = () => {
+ const [showTour, setShowTour] = useState(false)
+
+ const closeTour = () => {
+ setShowTour(false)
+ }
+
+ const steps = [
+ {
+ content: '70+ 高质量组件，覆盖移动端主流场景',
+ target: 'target4',
+ },
+ {
+ content: '支持一套代码同时开发多端小程序+H5',
+ target: 'target5',
+ },
+ {
+ content: '基于京东APP 10.0 视觉规范',
+ target: 'target6',
+ location: 'top-end',
+ },
+ {
+ content: '支持定制主题，内置 700+ 个主题变量',
+ target: 'target7',
+ location: 'top-end',
+ },
+ ]
+
+ return (
+ <>
+ {
+ setShowTour(true)
+ }}
+ />
+
+
+ ) => void` | `-` |
+| onChange | 切换步骤时触发 | `(value: number) => void` | `-` |
+
+### ListOptions
+
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| target | 目标对象 | `Element` \| `string` | `-` |
+| content | 气泡层内容 | `string` | `-` |
+| location | 弹出层位置 | `string` | `-` |
+| popoverOffset | 气泡层偏移量 | `number[]` | `-` |
+| arrowOffset | 小箭头的偏移量 | `number` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-tour-mask-border-radius | 遮罩层的border-radius值 | `10px` |
+| \--nutui-tour-content-min-width | 内容区的min-width值 | `200px` |
+| \--nutui-tour-content-padding | 内容区的padding值 | `10px 12px` |
+| \--nutui-tour-content-inner-margin | 内容区内部的margin值 | `10px 0px` |
+| \--nutui-tour-content-inner-font-size | 内容区内部的font-size值 | `14px` |
+| \--nutui-tour-content-bottom-margin-top | 内容区底部的margin-top值 | `10px` |
+| \--nutui-tour-content-bottom-btn-margin-left | 内容区底部按钮的margin-left值 | `4px` |
+| \--nutui-tour-content-bottom-btn-padding | 内容区底部按钮的padding值 | `2px 4px` |
+| \--nutui-tour-content-bottom-btn-font-size | 内容区底部按钮的font-size值 | `12px` |
+| \--nutui-tour-content-bottom-btn-border-radius | 内容区底部按钮的border-radius值 | `4px` |
+
+
+
+
+
diff --git a/src/packages/tour/doc.taro.md b/src/packages/tour/doc.taro.md
new file mode 100644
index 0000000000..a421b10430
--- /dev/null
+++ b/src/packages/tour/doc.taro.md
@@ -0,0 +1,386 @@
+# Tour 引导
+
+### 介绍
+
+用于引导用户了解产品功能的气泡组件。
+
+## 安装
+
+```tsx
+import { Tour } from '@nutui/nutui-react-taro';
+```
+
+## 代码演示
+### 基础用法
+
+:::demo
+
+```tsx
+import React, { useState } from "react";
+import { Cell, Switch, Tour } from '@nutui/nutui-react-taro';
+
+const App = () => {
+ const [showTour, setShowTour] = useState(false)
+
+ const closeTour = () => {
+ setShowTour(false)
+ }
+
+ const steps = [
+ {
+ content: '70+ 高质量组件，覆盖移动端主流场景',
+ target: 'target',
+ },
+ ]
+
+ return (
+ <>
+ {
+ setShowTour(true)
+ }}
+ />
+ }
+ />
+ {
+ setShowTour(true)
+ }}
+ />
+ }
+ />
+
+ 
+ 
+ 
+ | | | | |
+ }
+ />
+ onClick(e)}
+ style={style}
+ {...rest}
+ >
{
+ setShowTour3(true)
+ }}
+ />
+ }
+ />
+
+
+
+ )
+}
+export default App;
+```
+
+:::
+
+### Steps
+
+:::demo
+
+```tsx
+import React, { useState } from "react";
+import { Cell, Tour, Tabbar } from '@nutui/nutui-react';
+
+const App = () => {
+ const [showTour, setShowTour] = useState(false)
+
+ const closeTour = () => {
+ setShowTour(false)
+ }
+
+ const steps = [
+ {
+ content: '70+ high-quality components',
+ target: 'target4',
+ },
+ {
+ content: 'Support a set of codes to develop',
+ target: 'target5',
+ },
+ {
+ content: 'Based on JD APP 10.0',
+ target: 'target6',
+ location: 'top-end',
+ },
+ {
+ content: 'Support custom theme, built-in 700+ theme variables',
+ target: 'target7',
+ location: 'top-end',
+ },
+ ]
+
+ return (
+ <>
+ {
+ setShowTour(true)
+ }}
+ />
+
+
+ ) => void` | `-` |
+| onChange | Emit when step change | `(value: number) => void` | `-` |
+
+### ListOptions
+
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| target | target dom | `Element` \| `string` | `-` |
+| content | popover content | `string` | `-` |
+| location | Location of popover | `string` | `-` |
+| popoverOffset | Offset of popopver | `number[]` | `-` |
+| arrowOffset | Offset of arrow | `number` | `-` |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
+
+| Name | Description | Default |
+| --- | --- | --- |
+| \--nutui-tour-mask-border-radius | The border-radius value of the mask layer | `10px` |
+| \--nutui-tour-content-min-width | The min-width value of the content area | `200px` |
+| \--nutui-tour-content-padding | The padding value of the content area | `10px 12px` |
+| \--nutui-tour-content-inner-margin | The margin value inside the content area | `10px 0px` |
+| \--nutui-tour-content-inner-font-size | The font-size value inside the content area | `14px` |
+| \--nutui-tour-content-bottom-margin-top | margin-top value at the bottom of the content area | `10px` |
+| \--nutui-tour-content-bottom-btn-margin-left | The margin-left value of the button at the bottom of the content area | `4px` |
+| \--nutui-tour-content-bottom-btn-padding | The padding value of the button at the bottom of the content area | `2px 4px` |
+| \--nutui-tour-content-bottom-btn-font-size | The font-size value of the button at the bottom of the content area | `12px` |
+| \--nutui-tour-content-bottom-btn-border-radius | The border-radius value of the button at the bottom of the content area | `4px` |
+
+
+
+
+
diff --git a/src/packages/tour/doc.md b/src/packages/tour/doc.md
new file mode 100644
index 0000000000..a373f0ba91
--- /dev/null
+++ b/src/packages/tour/doc.md
@@ -0,0 +1,386 @@
+# Tour 引导
+
+### 介绍
+
+用于引导用户了解产品功能的气泡组件。
+
+## 安装
+
+```tsx
+import { Tour } from '@nutui/nutui-react';
+```
+
+## 代码演示
+### 基础用法
+
+:::demo
+
+```tsx
+import React, { useState } from "react";
+import { Cell, Switch, Tour } from '@nutui/nutui-react';
+
+const App = () => {
+ const [showTour, setShowTour] = useState(false)
+
+ const closeTour = () => {
+ setShowTour(false)
+ }
+
+ const steps = [
+ {
+ content: '70+ 高质量组件，覆盖移动端主流场景',
+ target: 'target',
+ },
+ ]
+
+ return (
+ <>
+ {
+ setShowTour(true)
+ }}
+ />
+ }
+ />
+ {
+ setShowTour(true)
+ }}
+ />
+ }
+ />
+
+
+
+
+ | | | | |
+ }
+ />
+
{!value && }
{activeText && (
diff --git a/src/packages/tabbaritem/tabbaritem.taro.tsx b/src/packages/tabbaritem/tabbaritem.taro.tsx
index 4a47b26569..31228a4a51 100644
--- a/src/packages/tabbaritem/tabbaritem.taro.tsx
+++ b/src/packages/tabbaritem/tabbaritem.taro.tsx
@@ -49,6 +49,7 @@ export const TabbarItem: FunctionComponent> = (
top,
right,
handleClick,
+ ...rest
} = {
...defaultProps,
...props,
@@ -79,6 +80,7 @@ export const TabbarItem: FunctionComponent> = (
...style,
}}
onClick={() => handleClick(index)}
+ {...rest}
>
{icon ? (
<>
diff --git a/src/packages/tabbaritem/tabbaritem.tsx b/src/packages/tabbaritem/tabbaritem.tsx
index 503d091fa6..dc31026494 100644
--- a/src/packages/tabbaritem/tabbaritem.tsx
+++ b/src/packages/tabbaritem/tabbaritem.tsx
@@ -49,6 +49,7 @@ export const TabbarItem: FunctionComponent> = (
top,
right,
handleClick,
+ ...rest
} = {
...defaultProps,
...props,
@@ -79,6 +80,7 @@ export const TabbarItem: FunctionComponent> = (
...style,
}}
onClick={() => handleClick(index)}
+ {...rest}
>
{icon ? (
<>
diff --git a/src/packages/tour/__test__/tour.spec.tsx b/src/packages/tour/__test__/tour.spec.tsx
new file mode 100644
index 0000000000..210dbde5dd
--- /dev/null
+++ b/src/packages/tour/__test__/tour.spec.tsx
@@ -0,0 +1,154 @@
+import * as React from 'react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Tour } from '../tour'
+
+const steps = [
+ {
+ content: '70+ 高质量组件，覆盖移动端主流场景',
+ target: 'target',
+ },
+]
+
+const steps2 = [
+ {
+ content: '支持一套代码同时开发多端小程序+H5',
+ target: 'target2',
+ popoverOffset: [40, 12],
+ arrowOffset: -36,
+ },
+]
+
+const steps3 = [
+ {
+ content: '70+ 高质量组件，覆盖移动端主流场景',
+ target: 'target3',
+ },
+]
+
+const steps4 = [
+ {
+ content: '70+ 高质量组件，覆盖移动端主流场景',
+ target: 'target4',
+ },
+ {
+ content: '支持一套代码同时开发多端小程序+H5',
+ target: 'target5',
+ },
+ {
+ content: '基于京东APP 10.0 视觉规范',
+ target: 'target6',
+ location: 'top-end',
+ },
+ {
+ content: '支持定制主题，内置 700+ 个主题变量',
+ target: 'target7',
+ location: 'top-end',
+ },
+]
+
+test('base render', () => {
+ const root = document.createElement('div')
+ root.id = 'target'
+ const { container } = render(
+
+
+ )
+ const tourArrow = container.querySelectorAll('.nut-popover-content-group')[0]
+ expect(tourArrow).toHaveTextContent('nutui 4.x 即将发布，敬请期待')
+})
+
+test('steps render', async () => {
+ const root = document.createElement('div')
+ root.id = 'target4'
+ const root1 = document.createElement('div')
+ root1.id = 'target5'
+ const { container } = render(
+ ({
+ 'zh-CN': {
+ title1: '基础用法',
+ title2: '自定义样式',
+ title3: '设置偏移量',
+ title4: '自定义内容',
+ title5: '步骤引导',
+ clickTry: '点击试试',
+ stepContent1: '70+ 高质量组件，覆盖移动端主流场景',
+ stepContent2: '支持一套代码同时开发多端小程序+H5',
+ stepContent3: '基于京东APP 10.0 视觉规范',
+ stepContent4: '支持定制主题，内置 700+ 个主题变量',
+ customContent: 'nutui-react 2.x 已经发布',
+ btnContent: '知道了',
+ tabTitle1: '首页',
+ tabTitle2: '分类',
+ tabTitle3: '购物车',
+ tabTitle4: '我的',
+ },
+ 'en-US': {
+ title1: 'Basic Usage',
+ title2: 'Custom Style',
+ title3: 'Custom Offset',
+ title4: 'Custom Content',
+ title5: 'Steps',
+ clickTry: 'click to try',
+ stepContent1: '70+ high-quality components',
+ stepContent2: 'Support a set of codes to develop',
+ stepContent3: 'Based on JD APP 10.0',
+ stepContent4: 'Support custom theme, built-in 700+ theme variables',
+ customContent: 'nutui-react 2.x is already released',
+ btnContent: 'knew',
+ tabTitle1: 'page',
+ tabTitle2: 'sort',
+ tabTitle3: 'cart',
+ tabTitle4: 'mine',
+ },
+ })
+
+ const [showTour, setShowTour] = useState(false)
+ const [showTour1, setShowTour1] = useState(false)
+ const [showTour2, setShowTour2] = useState(false)
+ const [showTour3, setShowTour3] = useState(false)
+ const [showTour4, setShowTour4] = useState(false)
+ const steps = [
+ {
+ content: translated.stepContent1,
+ target: 'target',
+ },
+ ]
+
+ const steps1 = [
+ {
+ content: translated.stepContent1,
+ target: 'target1',
+ },
+ ]
+
+ const steps2 = [
+ {
+ content: translated.stepContent2,
+ target: 'target2',
+ popoverOffset: [40, 12],
+ arrowOffset: -36,
+ },
+ ]
+
+ const steps3 = [
+ {
+ target: 'target3',
+ },
+ ]
+
+ const steps4 = [
+ {
+ content: translated.stepContent1,
+ target: 'target4',
+ },
+ {
+ content: translated.stepContent2,
+ target: 'target5',
+ },
+ {
+ content: translated.stepContent3,
+ target: 'target6',
+ location: 'top-end',
+ },
+ {
+ content: translated.stepContent4,
+ target: 'target7',
+ location: 'top-end',
+ },
+ ]
+
+ const closeTour = () => {
+ setShowTour(false)
+ }
+
+ const closeTour1 = () => {
+ setShowTour1(false)
+ }
+
+ const closeTour2 = () => {
+ setShowTour2(false)
+ }
+
+ const closeTour3 = () => {
+ setShowTour3(false)
+ }
+
+ const closeTour4 = () => {
+ setShowTour4(false)
+ }
+
+ return (
+ <>
+ ({
+ 'zh-CN': {
+ title1: '基础用法',
+ title2: '自定义样式',
+ title3: '设置偏移量',
+ title4: '自定义内容',
+ title5: '步骤引导',
+ clickTry: '点击试试',
+ stepContent1: '70+ 高质量组件，覆盖移动端主流场景',
+ stepContent2: '支持一套代码同时开发多端小程序+H5',
+ stepContent3: '基于京东APP 10.0 视觉规范',
+ stepContent4: '支持定制主题，内置 700+ 个主题变量',
+ customContent: 'nutui-react 2.x 已经发布',
+ btnContent: '知道了',
+ tabTitle1: '首页',
+ tabTitle2: '分类',
+ tabTitle3: '购物车',
+ tabTitle4: '我的',
+ },
+ 'en-US': {
+ title1: 'Basic Usage',
+ title2: 'Custom Style',
+ title3: 'Custom Offset',
+ title4: 'Custom Content',
+ title5: 'Steps',
+ clickTry: 'click to try',
+ stepContent1: '70+ high-quality components',
+ stepContent2: 'Support a set of codes to develop',
+ stepContent3: 'Based on JD APP 10.0',
+ stepContent4: 'Support custom theme, built-in 700+ theme variables',
+ customContent: 'nutui-react 2.x is already released',
+ btnContent: 'knew',
+ tabTitle1: 'page',
+ tabTitle2: 'sort',
+ tabTitle3: 'cart',
+ tabTitle4: 'mine',
+ },
+ })
+
+ const [showTour, setShowTour] = useState(false)
+ const [showTour1, setShowTour1] = useState(false)
+ const [showTour2, setShowTour2] = useState(false)
+ const [showTour3, setShowTour3] = useState(false)
+ const [showTour4, setShowTour4] = useState(true)
+ const steps = [
+ {
+ content: translated.stepContent1,
+ target: 'target',
+ },
+ ]
+
+ const steps1 = [
+ {
+ content: translated.stepContent1,
+ target: 'target1',
+ },
+ ]
+
+ const steps2 = [
+ {
+ content: translated.stepContent2,
+ target: 'target2',
+ popoverOffset: [40, 12],
+ arrowOffset: -36,
+ },
+ ]
+
+ const steps3 = [
+ {
+ target: 'target3',
+ },
+ ]
+
+ const steps4 = [
+ {
+ content: translated.stepContent1,
+ target: 'target4',
+ },
+ {
+ content: translated.stepContent2,
+ target: 'target5',
+ },
+ {
+ content: translated.stepContent3,
+ target: 'target6',
+ location: 'top-end',
+ },
+ {
+ content: translated.stepContent4,
+ target: 'target7',
+ location: 'top-end',
+ },
+ ]
+
+ const closeTour = () => {
+ setShowTour(false)
+ }
+
+ const closeTour1 = () => {
+ setShowTour1(false)
+ }
+
+ const closeTour2 = () => {
+ setShowTour2(false)
+ }
+
+ const closeTour3 = () => {
+ setShowTour3(false)
+ }
+
+ const closeTour4 = () => {
+ setShowTour4(false)
+ }
+
+ return (
+ <>
+ {
+ setShowTour(true)
+ }}
+ />
+ }
+ />
+ {
+ setShowTour(true)
+ }}
+ />
+ }
+ />
+
+
+
+
+ | | |
+ }
+ />
+
+
+ nutui 4.x 即将发布，敬请期待
+
+ {
+ setShowTour(true)
+ }}
+ />
+ }
+ />
+ {
+ setShowTour1(true)
+ }}
+ />
+ }
+ />
+ {
+ setShowTour2(true)
+ }}
+ extra={
+ {
+ setShowTour3(true)
+ }}
+ />
+ }
+ />
+
+
+
+ {
+ setShowTour4(true)
+ }}
+ />
+
+
+ | | | | |
+
+ )
+}
+
+export default TourDemo
diff --git a/src/packages/tour/demo.tsx b/src/packages/tour/demo.tsx
new file mode 100644
index 0000000000..2c1c2ec8df
--- /dev/null
+++ b/src/packages/tour/demo.tsx
@@ -0,0 +1,304 @@
+import React, { useState } from 'react'
+import { useTranslate } from '../../sites/assets/locale'
+import Cell from '@/packages/cell'
+import Switch from '@/packages/switch'
+import Divider from '@/packages/divider'
+import Tabbar from '@/packages/tabbar'
+import { Tour } from './tour'
+
+import './demo.scss'
+
+interface T {
+ title1: string
+ title2: string
+ title3: string
+ title4: string
+ title5: string
+ clickTry: string
+ stepContent1: string
+ stepContent2: string
+ stepContent3: string
+ stepContent4: string
+ customContent: string
+ btnContent: string
+ tabTitle1: string
+ tabTitle2: string
+ tabTitle3: string
+ tabTitle4: string
+}
+const TourDemo = () => {
+ const [translated] = useTranslate{translated.title1}
+{translated.title2}
+{translated.title3}
+
+
+
+
+
+ }
+ />
+
+
+
+ {translated.title4}
+
+
+ {translated.customContent}
+ {
+ setShowTour3(false)
+ }}
+ >
+ {translated.btnContent}
+
+ {translated.title5}
+
+ {
+ setShowTour(true)
+ }}
+ />
+ }
+ />
+ {
+ setShowTour1(true)
+ }}
+ />
+ }
+ />
+ {
+ setShowTour2(true)
+ }}
+ extra={
+ {
+ setShowTour3(true)
+ }}
+ />
+ }
+ />
+
+
+
+ {
+ setShowTour4(true)
+ }}
+ />
+
+
+ | | | | |
+
+ )
+}
+
+export default TourDemo
diff --git a/src/packages/tour/doc.en-US.md b/src/packages/tour/doc.en-US.md
new file mode 100644
index 0000000000..43985ef45a
--- /dev/null
+++ b/src/packages/tour/doc.en-US.md
@@ -0,0 +1,386 @@
+# Tour
+
+### Intro
+
+A bubble component used to guide the user through the product's capabilities.
+
+## Install
+
+```tsx
+import { Tour } from '@nutui/nutui-react';
+```
+
+## Demo
+### Basic Usage
+
+:::demo
+
+```tsx
+import React, { useState } from "react";
+import { Cell, Switch, Tour } from '@nutui/nutui-react';
+
+const App = () => {
+ const [showTour, setShowTour] = useState(false)
+
+ const closeTour = () => {
+ setShowTour(false)
+ }
+
+ const steps = [
+ {
+ content: '70+ high-quality components',
+ target: 'target',
+ },
+ ]
+
+ return (
+ <>
+ {translated.title1}
+{translated.title2}
+{translated.title3}
+
+
+
+
+
+ }
+ />
+
+
+
+ {translated.title4}
+
+
+ {translated.customContent}
+ {
+ setShowTour3(false)
+ }}
+ >
+ {translated.btnContent}
+
+ {translated.title5}
+
+
+
+
+
+ nutui-react 2.x is already released
+ {
+ setShowTour(false)
+ }}
+ >
+ knew
+
+
+
+
+
+
+ nutui-react 2.x 已经发布
+ {
+ setShowTour(false)
+ }}
+ >
+ 知道了
+
+
+
+
+
+
+ nutui 4.x 即将发布，敬请期待
+ {
+ setShowTour(false)
+ }}
+ >
+ 知道了
+
+
+
+ {list.map((item, index) => {
+ return (
+
+ )
+}
+
+Tour.defaultProps = defaultProps
+Tour.displayName = 'NutTour'
diff --git a/src/packages/tour/tour.tsx b/src/packages/tour/tour.tsx
new file mode 100644
index 0000000000..77a286d6b8
--- /dev/null
+++ b/src/packages/tour/tour.tsx
@@ -0,0 +1,262 @@
+import React, { useState, useEffect, ReactNode, FunctionComponent } from 'react'
+import type { MouseEvent } from 'react'
+import { Close } from '@nutui/icons-react'
+import classNames from 'classnames'
+import Popover from '@/packages/popover'
+import { PopoverLocation } from '@/packages/popover/popover'
+import { getRect } from '@/utils/use-client-rect'
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { useConfig } from '@/packages/configprovider'
+
+export interface ListOptions {
+ target: Element | string
+ content?: string
+ location?: string
+ popoverOffset?: number[]
+ arrowOffset?: number
+}
+
+export type TourType = 'step' | 'tile'
+
+export interface TourProps extends BasicComponent {
+ visible: boolean
+ type: TourType
+ location: PopoverLocation | string
+ mask: boolean
+ maskWidth: number | string
+ maskHeight: number | string
+ offset: number[]
+ list: ListOptions[]
+ title: ReactNode
+ next: ReactNode
+ prev: ReactNode
+ complete: ReactNode
+ showPrev: boolean
+ closeOnOverlayClick: boolean
+ onClose: (e: MouseEvent
+ {index === active && (
+ <>
+ {showTour && (
+
+ )}
+
+ <>
+ <>
+ {children || (
+ <>
+ {type === 'step' && (
+
+
+ )}
+
+ )
+ })}
+
+ {title && (
+
+ )}
+ {type === 'tile' && (
+
+
+ )}
+ maskClose(e)}>
+
+
+ {item.content}
+
+
+
+
+ {active + 1}/{list.length}
+
+
+ {active !== 0 && showPrev && (
+
+ changeStep('prev')}
+ >
+ {prev || locale.tour.prevStepText}
+
+ )}
+ {list.length - 1 === active && (
+ maskClose(e)}
+ >
+ {complete || locale.tour.completeText}
+
+ )}
+ {list.length - 1 !== active && (
+ changeStep('next')}
+ >
+ {next || locale.tour.nextStepText}
+
+ )}
+
+
+ )}
+
+ )}
+
+
+ {item.content}
+
+
+
+ {list.map((item, index) => {
+ return (
+
+ )
+}
+
+Tour.defaultProps = defaultProps
+Tour.displayName = 'NutTour'
diff --git a/src/sites/mobile-taro/src/app.config.ts b/src/sites/mobile-taro/src/app.config.ts
index 653a1ad1f3..7aabe2ca33 100644
--- a/src/sites/mobile-taro/src/app.config.ts
+++ b/src/sites/mobile-taro/src/app.config.ts
@@ -97,6 +97,7 @@ const subPackages = [
"pages/swiper/index",
"pages/table/index",
"pages/tag/index",
+ "pages/tour/index",
"pages/video/index",
"pages/virtuallist/index"
]
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 4c5158b394..551e36ac56 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -740,6 +740,39 @@ $toast-cover-bg-color: var(--nutui-toast-cover-bg-color, $gray7) !default;
$toast-inner-top: var(--nutui-toast-inner-top, 50%) !default;
$toast-inner-text-align: var(--nutui-toast-inner-text-align, 'center') !default;
+//tour（✅）
+$tour-mask-border-radius: var(--nutui-tour-mask-border-radius, 10px) !default;
+$tour-content-min-width: var(--nutui-tour-content-min-width, 200px) !default;
+$tour-content-padding: var(--nutui-tour-content-padding, 10px 12px) !default;
+$tour-content-inner-margin: var(
+ --nutui-tour-content-inner-margin,
+ 10px 0px
+) !default;
+$tour-content-inner-font-size: var(
+ --nutui-tour-content-inner-font-size,
+ 14px
+) !default;
+$tour-content-bottom-margin-top: var(
+ --nutui-tour-content-bottom-margin-top,
+ 10px
+) !default;
+$tour-content-bottom-btn-margin-left: var(
+ --nutui-tour-content-bottom-btn-margin-left,
+ 4px
+) !default;
+$tour-content-bottom-btn-padding: var(
+ --nutui-tour-content-bottom-btn-padding,
+ 2px 4px
+) !default;
+$tour-content-bottom-btn-font-size: var(
+ --nutui-tour-content-bottom-btn-font-size,
+ 12px
+) !default;
+$tour-content-bottom-btn-border-radius: var(
+ --nutui-tour-content-bottom-btn-border-radius,
+ 4px
+) !default;
+
//backtop（✅）
$backtop-border-color: var(--nutui-backtop-border-color, #e0e0e0) !default;
diff --git a/src/utils/typings.ts b/src/utils/typings.ts
index 9eea7ac58d..a995f67e65 100644
--- a/src/utils/typings.ts
+++ b/src/utils/typings.ts
@@ -4,6 +4,7 @@ export interface BasicComponent {
className?: string
style?: CSSProperties
children?: ReactNode
+ id?: string
}
export const ComponentDefaults = {
diff --git a/src/utils/use-taro-rect.ts b/src/utils/use-taro-rect.ts
new file mode 100644
index 0000000000..2d2ccf7bc0
--- /dev/null
+++ b/src/utils/use-taro-rect.ts
@@ -0,0 +1,25 @@
+import Taro from '@tarojs/taro'
+
+export const getTaroRectById = (id: string) => {
+ return new Promise((resolve, reject) => {
+ if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+ const t = document ? document.querySelector(`#${id}`) : ''
+ if (t) {
+ resolve(t?.getBoundingClientRect())
+ }
+ reject()
+ } else {
+ const query = Taro.createSelectorQuery()
+ query
+ .select(`#${id}`)
+ .boundingClientRect()
+ .exec(function (rect: any) {
+ if (rect[0]) {
+ resolve(rect[0])
+ } else {
+ reject()
+ }
+ })
+ }
+ })
+}
+ {index === active && (
+ <>
+ {showTour && (
+
+ )}
+
+ {/* placeholder don't delete <> */}
+ <>
+ <>
+ {children || (
+ <>
+ {type === 'step' && (
+
+
+ )}
+
+ )
+ })}
+
+ {title && (
+
+ )}
+ {type === 'tile' && (
+
+
+ )}
+ maskClose(e)}>
+
+
+ {item.content}
+
+
+
+
+ {active + 1}/{list.length}
+
+
+ {active !== 0 && showPrev && (
+
+ changeStep('prev')}
+ >
+ {prev || locale.tour.prevStepText}
+
+ )}
+ {list.length - 1 === active && (
+ maskClose(e)}
+ >
+ {complete || locale.tour.completeText}
+
+ )}
+ {list.length - 1 !== active && (
+ changeStep('next')}
+ >
+ {next || locale.tour.nextStepText}
+
+ )}
+
+
+ )}
+
+ )}
+
+
+ {item.content}
+
+