diff --git a/docs/examples/basic.less b/docs/examples/basic.less index 550a397..7d26560 100644 --- a/docs/examples/basic.less +++ b/docs/examples/basic.less @@ -220,11 +220,20 @@ } } + &-buttons { + display: flex; + } + &-prev-btn,&-next-btn,&-finish-btn{ display: inline-block; margin-left: 8px; } + &-prompt-btn { + display: inline-block; + min-width: 80px; + } + .ant-btn-primary { color: #fff; border: 1px solid #1890ff; diff --git a/src/Tour.tsx b/src/Tour.tsx index d489c80..d5c932a 100644 --- a/src/Tour.tsx +++ b/src/Tour.tsx @@ -40,6 +40,7 @@ const Tour: React.FC = props => { open, mask = true, arrow = true, + prompt= false, rootClassName, placement, renderPanel, @@ -167,6 +168,10 @@ const Tour: React.FC = props => { handleClose(); onFinish?.(); }} + onNoPrompt={() => { + handleClose(); + onFinish?.(); + }} {...steps[mergedCurrent]} closable={mergedClosable} /> diff --git a/src/TourStep/DefaultPanel.tsx b/src/TourStep/DefaultPanel.tsx index 364533e..7fb1ab1 100644 --- a/src/TourStep/DefaultPanel.tsx +++ b/src/TourStep/DefaultPanel.tsx @@ -20,6 +20,8 @@ export default function DefaultPanel(props: DefaultPanelProps) { onFinish, className, closable, + prompt = true, + onNoPrompt } = props; const ariaProps = pickAttrs(closable || {}, true); const closeIcon = closable?.closeIcon ?? ×; @@ -47,16 +49,24 @@ export default function DefaultPanel(props: DefaultPanelProps) {
{total > 1 ? [...Array.from({ length: total }).keys()].map((item, index) => { - return ( - - ); - }) + return ( + + ); + }) : null}
+ {prompt && ( + + )} {current !== 0 ? (