Descrição#
o código curto intro permite usar a biblioteca intro.js para gerar uma introdução demonstrativa do Site.
Configuração de intro.js#
O conteúdo do código curto cria a configuração da introdução em formato JSON. Também, alguns parâmetros tem sido adicionados no tema para simplificar e adaptar as configurações.
{
"[...]",
"[Standard intro.js options]": "https://introjs.com/docs/intro/options (Veja as opções padrão do tema na lista embaixo)",
"[...]",
"onbeforeexit": "JavaScript code to execute before exiting the intro (linked to the standard onbeforeexit API of intro.js)",
"onexit": "JavaScript code to execute when exiting the intro (linked to the standard onexit API of intro.js)",
"oncomplete": "JavaScript code to execute when completing the intro (linked to the standard oncomplete API of intro.js)",
"steps": [
{
"title": "Step title (linked to the standard title option of intro.js)",
"element": "Element to highlight (linked to the standard element option of intro.js (⚠ only selection by id of an element is available))",
"intro": "Step content (linked to the standard intro option of intro.js)",
"position": "Helper step position (linked to the standard position option of intro.js)",
"onchange": "JavaScript code to execute when changing the step (linked to the standard onchange API of intro.js)",
"onbeforechange": "JavaScript code to execute before changing the step (linked to the standard onbeforechange API of intro.js)",
"onafterchange": "JavaScript code to execute after changing the step (linked to the standard onafterchange API of intro.js)",
"triggeronly": "Step triggers list allowing execution of the step (See step triggers list below)",
"triggerexcept": "Step triggers list not allowing execution of the step (See step triggers list below)"
}]
}
Gatilhos para cada passo#
Os gatilhos para os passos (“step triggers”) permitem executar ou não algumas das etapas da introdução. Caso um dos gatilhos seja definido em uma etapa e se encontra ativo no site, então a etapa será ou não executada, dependendo da configuração.
Nome | Descrição |
---|---|
desktop | Habilitado se a janela é maior ou igual a 1024 pixels de largura |
touch | Habilitado se a janela é menor a 1024 pixels de largura e maior ou igual a 769 |
mobile | Habilitado se a janela é menor a 769 pixels de largura |
hover | Habilitado se o dispositivo permite realizar hover sobre os itens |
nohover | Habilitado se o dispositivo não permite realizar hover sobre os itens (dispositivos táteis) |
Opções padrão#
const themeCommonOptions = {
nextLabel: {{i18n "intro_nextlabel"}},
prevLabel: {{i18n "intro_prevlabel"}},
skipLabel: {{i18n "intro_skiplabel"}},
doneLabel: {{i18n "intro_donelabel"}},
hidePrev: false,
hideNext: false,
nextToDone: true,
exitOnEsc: true,
exitOnOverlayClick: true,
showStepNumbers: false,
keyboardNavigation: true,
showButtons: true,
showBullets: true,
showProgress: true,
scrollToElement: true,
scrollTo: "element",
scrollPadding: 30,
overlayOpacity: 0.8,
disableInteraction: true
Parâmetros#
Nome | Tipo(nomeado/posicional) | Descrição |
---|---|---|
introtitle | nomeado | Intro mostra o botão de título. PS: Caso não for especificado, o título será o texto padrão definido pelo tema. |
id | nomeado | Identificador, dado o elemento global HTML do botão ‘intro’. PS: Caso não for especificado, o identificador será gerado por padrão pelo tema e se adicionará cada código curto definido na página (intro-X). |
Exemplos#
Markdown | Renderização |
---|---|
|
|
Sou uma introdução |