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...
Top comments (3)
Hi, you could probably add this tag to your post: dev.to/t/spanish
Hi!
I will add dev.to/t/portuguese.
Thanks for the heads up.
Oh yeah, sorry!
Didn't knew it was 🇵🇹. 😂