blinguidance

guidance

1.0.3
npm

Version published: 2 years ago

Weekly downloads: 1; decreased by-50%

Maintainers: 1

Weekly downloads

Created: 2 years ago

Source

guidance

config

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

interface Btns {
  next: Next;
  end: Next;
}

interface Next {
  height: string;
  width: string;
  border: string;
  bottom: string;
  left: string;
  transform: string;
}

interface Flow {
  target: string;
  height: string;
  width: string;
  border: string;
  backgroundImage: string;
  placement?: 'left'|'right'|'top'|'bottom'|'topLeft'|'topRight'|'bottomLeft'|'bottomRight';
}

  const guidance = Guidance.create({
        flow: [
          {
            target: '.step1',
            height: '166px',
            width: '324px',
            border: '1px solid #eee',
            backgroundImage: 'url("./img/step1.png")',
          },
          {
            target: '.step2',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step2.png")',
            border: '1px solid #eee',
          },
          {
            target: '.step3',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step3.png")',
            border: '1px solid #eee',
          },
          {
            target: '.step4',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step4.png")',
            border: '1px solid #eee',
          },
          {
            target: '.step5',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step5.png")',
            border: '1px solid #eee',
          },
        ],
        btns: {
          next: {
            height: '36px',
            width: '100px',
            border: '1px solid #eee',
            bottom: '36px',
            left: '50%',
            transform: 'translate(-50%)',
          },
          end: {
            height: '36px',
            width: '100px',
            border: '1px solid #eee',
            bottom: '0',
            left: '50%',
            transform: 'translate(-50%)',
          },
        },
      })

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

      gen.next()

example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .step1 {
        height: 40px;
        width: 80px;
        background-color: pink;
        margin: 200px auto;
      }
      .step2 {
        height: 90px;
        width: 80px;
        background-color: pink;
        margin: 400px 400px;
      }
      .step3 {
        height: 20px;
        width: 80px;
        background-color: pink;
        margin: 600px auto;
      }
      .step4 {
        height: 70px;
        width: 200px;
        background-color: pink;
        margin: 100px 400px;
      }
      .step5 {
        height: 60px;
        width: 500px;
        background-color: pink;
        position: fixed;
        top: 50%;
      }
    </style>
  </head>
  <body>
    <div class="step1"></div>
    <div class="step2"></div>
    <div class="step3"></div>
    <div class="step4"></div>
    <div class="step5"></div>
    <script src="./src/lib/guidance.umd.js"></script>
    <script>
      const guidance = Guidance.create({
        flow: [
          {
            target: '.step1',
            height: '166px',
            width: '324px',
            backgroundImage: 'url("./img/step1.png")',
            placement: 'bottom',
            next: {
              left: '50px',
            },
          },
          {
            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',
          },
        ],
        btns: {
          next: {
            height: '36px',
            width: '100px',
            border: '1px solid #eee',
            bottom: '36px',
            left: '50%',
          },
          end: {
            height: '36px',
            width: '100px',
            border: '1px solid #eee',
            bottom: '0',
            left: '50%',
          },
        },
      })

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

      gen.next()
    </script>
  </body>
</html>

FAQs

What is blinguidance?

Is blinguidance popular?

Is blinguidance well maintained?

Package last updated on 06 Sep 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

blinguidance

guidance

config

example

Related posts

Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility

React Team Updates CRA Migration Guidance After Community Pushback