blinguidance

guidance

config

interface Config {
  flow: Flow[];
  btns: Btns;
}

interface Btns {
  next: Next2;
  end: End2;
}

interface End2 {
  width: string;
  lineHeight: string;
  borderRadius: string;
  left: string;
  fontSize: string;
  fontFamily: string;
  color: string;
  bottom: string;
  transform: string;
  content: string;
}

interface Next2 {
  width: string;
  lineHeight: string;
  background: string;
  border: string;
  borderRadius: string;
  bottom: string;
  left: string;
  fontSize: string;
  fontFamily: string;
  color: string;
  content: string;
  transform: string;
}

interface Flow {
  target: string;
  height: string;
  width: string;
  backgroundImage: string;
  placement: string;
  adjustment?: Adjustment;
  next?: Next;
  end?: End;
}

interface End {
  bottom: string;
}

interface Next {
  left: string;
}

interface Adjustment {
  top: number;
  left: number;
}

example

  const guidance = Guidance.create({
        flow: [
          {
            target: '.step1',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step1.png")',
            placement: 'bottom',
            adjustment: {
              top: -10,
              left: -20,
            },
          },
          {
            target: '.step2',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step2.png")',
            placement: 'left',
          },
          {
            target: '.step3',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step3.png")',
            placement: 'topLeft',
          },
          {
            target: '.step4',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step4.png")',
            placement: 'topRight',
          },
          {
            target: '.step5',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step5.png")',
            placement: 'bottomRight',
            next: {
              left: '-99999px',
            },
            end: {
              bottom: '-56px',
            },
          },
        ],
        btns: {
          next: {
            width: '100px',
            lineHeight: '36px',
            background: 'rgba(255,255,255,0.1)',
            border: '2px solid rgba(255,255,255,0.6)',
            borderRadius: '18px',
            bottom: '-56px',
            left: '50%',
            fontSize: '16px',
            fontFamily: 'PingFang SC',
            color: '#FFFFFF',
            content: '下一步',
            transform: 'translateX(-50%)',
          },
          end: {
            width: '100px',
            lineHeight: '36px',
            borderRadius: '18px',
            left: '50%',
            fontSize: '16px',
            fontFamily: 'PingFang SC',
            color: '#FFFFFF',
            bottom: '-102px',
            left: '50%',
            transform: 'translateX(-50%)',
            content: '我知道了',
          },
        },
      })

      const gen = guidance(
        e => gen.next(),
        e => gen.end()
      )

      gen.next()