❤
npm
Sign UpSign In

jizhi-guide
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

jizhi-guide

react 用户指引组件

Usage

基础用法 默认居中

import { Guide } from 'jizhi-guide';
import { useRef, useState } from 'react';

export default () => {
  const targetDom = useRef();
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('left');
  const onClose = () => {
    setOpen(false);
  };
  const placements = ['left', 'right', 'bottom', 'top'];
  const show = (p) => {
    setPlacement(p);
    setOpen(true);
  };
  return (
    <>
      {placements.map((item) => {
        return (
          <button
            type="primary"
            style={{ margin: '10px' }}
            key={item}
            onClick={() => show(item)}
          >
            show {item}
          </button>
        );
      })}
      <div>
        <span ref={targetDom}>目标高亮区域</span>
      </div>
      <Guide
        onClose={onClose}
        dom={targetDom.current}
        open={open}
        title="Hello jizhi-guide"
        placement={placement}
      >
        内容
      </Guide>
    </>
  );
};

其他位置

import { Guide } from 'jizhi-guide';
import { useRef, useState } from 'react';

export default () => {
  const targetDom = useRef();
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('left');
  const onClose = () => {
    setOpen(false);
  };
  const placements = [
    'top-left',
    'top-right',
    'bottom-left',
    'bottom-right',
    'left-top',
    'left-bottom',
    'right-top',
    'right-bottom',
  ];
  const show = (p) => {
    setPlacement(p);
    setOpen(true);
  };
  return (
    <>
      {placements.map((item) => {
        return (
          <button
            type="primary"
            style={{ margin: '10px' }}
            key={item}
            onClick={() => show(item)}
          >
            show {item}
          </button>
        );
      })}
      <div>
        <span ref={targetDom}>目标高亮区域</span>
      </div>
      <Guide
        onClose={onClose}
        dom={targetDom.current}
        open={open}
        title="Hello jizhi-guide"
        placement={placement}
      >
        内容
      </Guide>
    </>
  );
};

偏移位置

import { Guide } from 'jizhi-guide';
import { useRef, useState } from 'react';

export default () => {
  const targetDom = useRef();
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('left');
  const onClose = () => {
    setOpen(false);
  };
  const placements = [
    'left',
    'right',
    'bottom',
    'top',
    'top-left',
    'top-right',
    'bottom-left',
    'bottom-right',
    'left-top',
    'left-bottom',
    'right-top',
    'right-bottom',
  ];
  const show = (p) => {
    setPlacement(p);
    setOpen(true);
  };
  const targetStyle = {
    background: 'red',
    width: '200px',
    height: '100px',
  };
  return (
    <>
      {placements.map((item) => {
        return (
          <button
            type="primary"
            style={{ margin: '10px' }}
            key={item}
            onClick={() => show(item)}
          >
            show {item}
          </button>
        );
      })}
      <div style={targetStyle} ref={targetDom}>
        目标高亮区域
      </div>
      <Guide
        onClose={onClose}
        dom={targetDom.current}
        open={open}
        title="Hello jizhi-guide"
        placement={placement}
        offset={{ x: 20, y: 20 }}
      >
        内容
      </Guide>
    </>
  );
};

自定义指引箭头

不仅仅是指引箭头，还可以是任何你想要的装饰 dom

import { Guide } from 'jizhi-guide';
import { useRef, useState } from 'react';

export default () => {
  const targetDom = useRef();
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('left');
  const onClose = () => {
    setOpen(false);
  };
  const placements = ['left'];
  const show = (p) => {
    setPlacement(p);
    setOpen(true);
  };
  return (
    <>
      <button
        type="primary"
        style={{ margin: '10px' }}
        onClick={() => show('right')}
      >
        show left
      </button>
      <div>
        <span ref={targetDom}>目标高亮区域</span>
      </div>
      <Guide
        onClose={onClose}
        dom={targetDom.current}
        open={open}
        title="Hello jizhi-guide"
        placement={placement}
        showArrow={false}
        margin={80}
        decorate={
          <div style={{ position: 'absolute ', left: '-75px', top: '30px' }}>
            <svg
              width="72"
              height="72"
              className="icon"
              viewBox="0 0 1267 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5355"
            >
              <path
                d="M1170.529524 73.094095L97.304381 499.809524 1170.529524 926.524952 978.236952 499.809524z"
                fill="#1296db"
                p-id="5356"
              ></path>
            </svg>
          </div>
        }
      >
        内容
      </Guide>
    </>
  );
};

主题颜色

import { Guide } from 'jizhi-guide';
import { useRef, useState } from 'react';

export default () => {
  const targetDom = useRef();
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('left');
  const onClose = () => {
    setOpen(false);
  };
  const placements = ['left'];
  const show = (p) => {
    setPlacement(p);
    setOpen(true);
  };
  return (
    <>
      <button
        type="primary"
        style={{ margin: '10px' }}
        onClick={() => show('right')}
      >
        show left
      </button>
      <div>
        <span ref={targetDom}>目标高亮区域</span>
      </div>
      <Guide
        onClose={onClose}
        dom={targetDom.current}
        open={open}
        title="Hello jizhi-guide"
        placement={placement}
        themeColor="rgb(2, 94, 51)"
      >
        内容
      </Guide>
    </>
  );
};

加入步值的例子

import { Guide } from 'jizhi-guide';
import { useRef, useState } from 'react';

export default () => {
  const targetDom = useRef();
  const targetDom2 = useRef();
  const [open, setOpen] = useState(false);
  const [open1, setOpen1] = useState(false);
  const onClose = () => {
    setOpen(false);
    setOpen1(true);
  };
  const onClose2 = () => {
    setOpen1(false);
  };
  const show = () => {
    setOpen(true);
  };
  const targetStyle = {
    background: 'red',
    width: '200px',
    height: '100px',
    marginBottom: '1000px',
  };
  const targetStyle2 = {
    background: 'green',
    width: '200px',
    height: '100px',
  };
  const spanStyle = {
    display: 'inline-block',
    lineHeight: '28px',
    marginRight: '10px',
    color: '#666',
  };
  return (
    <>
      <button type="primary" style={{ margin: '10px' }} onClick={() => show()}>
        show
      </button>
      <div style={targetStyle} ref={targetDom}>
        目标高亮区域1
      </div>
      <div style={targetStyle2} ref={targetDom2}>
        目标高亮区域2
      </div>
      <Guide
        onClose={onClose}
        dom={targetDom.current}
        open={open}
        title="Hello jizhi-guide"
        spanEle={<span style={spanStyle}>1/2</span>}
        showCancel={true}
      >
        目标高亮区域1内容
      </Guide>
      <Guide
        onClose={onClose2}
        dom={targetDom2.current}
        open={open1}
        title="Hello jizhi-guide"
        spanEle={<span style={spanStyle}>2/2</span>}
      >
        目标高亮区域2内容
      </Guide>
    </>
  );
};

api 简介

参数 说明 类型 默认值
dom 高亮 dom 元素,可以是 dom 元素和其唯一的 id 或者 class HTMLElement ,string
placement 弹层相对于高亮元素所在位置 string , 'top','left' ,'bottom','right','top-left', 'top-right''bottom-left','bottom-right', 'left-top','left-bottom','right-top', 'right-bottom'
offset 偏移参数 {x:number,y:number} {x:0,y:0}
width 弹层宽度 number 260
title 弹框标题 string,HTMLElement
radius 高亮区域和弹层圆角 number 4
cancelText 取消按钮文案 string "下一步"
showCancel 是否展示取消按钮 boolean fasle
onCancel 取消按钮的 click 事件 () => void
showOk 是否显示我知道了按钮 boolean true
okText ok 按钮自定义文案 string 我知道了
onClose 关闭弹层的回调 ()=>void
decorate 弹层自定义装饰 dom 元素 JSX.Element
showArrow 是否显示默认弹层指引箭头 boolean true
open 是否显示指引 boolean fasle
zIndex 弹层显示的层级 number 100
margin 弹层与高亮元素位置间距 number 20
footer 弹层底部内容，当不需要默认底部按钮时，可以设为 footer={false} HTMLElement,boolean true
lang 语言 string zh
themeColor 主题颜色 string #1890ff
delayTime 延时渲染时间 number 100
spanEle 步值标注 string ,HTMLElement

Readme

Keywords

none

Package Sidebar

Install

npm i jizhi-guide

Weekly Downloads

0

Version

1.0.3

License

MIT

Unpacked Size

55.7 kB

Total Files

32

Last publish

Collaborators

  • hanzhangmin
Try on RunKit
Report malware