Usando o shepherdjs para fazer tours em uma aplicação nuxt (vue.js) (Parte 2)

#shepherdj #nuxt #vue #portuguese

Dando continuidade ao tutorial, aqui você encontra a primeira parte, vamos alterar mais alguns comportamentos do nosso projeto e aqui você encontra o repositório.

Para diminuir a largura do elemento do shepherd, iremos adicionar a classe width-limit, conforme código abaixo. Você pode declarar uma série de classes para que sejam aplicadas no elemento do shepherd. Por hora iremos aplicar apenas uma classe. É necessário retirar o scoped da declaração de style, então tenha muito cuidado.

Também vamos alterar a opção on dentro de attachTo, que escolhe o posicionamento da flecha/elemento shepherd, vamos trocar de 'top' para 'right-end'.

mounted() {
    this.$nextTick(() => {
      const tour = this.$shepherd({
        useModalOverlay: true,
        defaultStepOptions: {
          popperOptions: {
            modifiers: [{ name: 'offset', options: { offset: [0,50] } }]
          }
        }
      });

      tour.addStep({
        classes: 'width-limit',
        attachTo: { element: '#shepherd-teste', on: 'right-end' },
        text: 'Test'
      });

      tour.start();
      });
    }

E a declaração em style

.width-limit {
  max-width: 200px;
}

E assim ficou o nosso elemento, menor e renderizado a direita.

Você deve ter notado que com a mudança de lugar, a seta que aponta para o elemento a ser destacado ficou "fora do esquadro" e isso incomoda um pouco. Para corrigir este tipo de situação usamos o modificador do popper chamado 'arrow', assim a opção popperOptions fica da seguinte forma:

popperOptions: {
  modifiers: [{ name: 'offset', options: { offset: [0, 50] } }, 
              { name: 'arrow', options: { padding: 20 } }]
}

E o elemento fica desta forma (bem mais apresentável), com a seta deslocada mais ao centro e o elemento no mesmo lugar. Usei o valor 20 pois é o que faz sentido para o exemplo, mas você pode testar com valores positivos e negativos.

Para deixar o elemento mais completo, podemos adicionar um título, e adicionar um botão de cancelamento do tutorial. As opções utilizadas serão cancelIcon e title. Importante notar que a opção cancelIcon se trata de um objeto com a propriedade enabled que é um valor booleano.

O visual e o código ficam da seguinte maneira:

this.$shepherd({
          useModalOverlay: true,
          defaultStepOptions: {
            cancelIcon: {enabled: true},
            popperOptions: {
              modifiers: [{ name: 'offset', options: { offset: [0, 50] } }, 
              { name: 'arrow', options: { padding: 20 } }]
            }
         }
});

tour.addStep({
  classes: 'width-limit',
  attachTo: { element: '#shepherd-teste', on: 'right-end' },
  title: 'Test Title',
  text: 'Test'
});

Continua em breve...

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →