{{< intro >}}

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.

Configuração JSON do conteúdo do código curto 'intro'
{
  "[...]",
  "[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#

Theme default intro.js options
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

|

{{</* intro
  introtitle="Sou uma introdução"
  id="introTest"
*/>}}
{
  "showBullets": false,
  "showStepNumbers": true,
  "onexit": "console.log(\"I'm exiting the intro\");",
  "oncomplete": "console.log(\"I'm exiting the intro after completing it\");",
  "steps": [
    {
      "title": "Passo 1",
      "intro": "Sou o passo 1 para todo o conteúdo",
      "onchange": "console.log(\"I'm entering step 1 for everyone\");"
    },{
      "title": "Passo 2",
      "intro": "Sou o passo 2 para o gatilho do desktop",
      "onchange": "console.log(\"I'm entering step 2 for the desktop trigger\");",
      "triggeronly": ["desktop"]
    },{
      "title": "Passo 2",
      "intro": "Sou o passo 2 para dispositivos móveis e gatilhos táteis",
      "onchange": "console.log(\"I'm entering step 2 for the mobile and touch triggers\");",
      "triggeronly": ["mobile","touch"]
    },{
      "title": "Passo 3",
      "intro": "Sou o passo 3 para todo o conteúdo exetuando o gatilho para hover",
      "onchange": "console.log(\"I'm entering step 3 for everyone except the hover trigger\");",
      "triggerexcept": ["hover"]
    },{
      "title": "Passo 3",
      "intro": "Sou o passo 3 para todo o conteúdo excetuando o gatilho nohover",
      "onchange": "console.log(\"I'm entering step 3 for everyone except the nohover trigger\");",
      "triggerexcept": ["nohover"]
    },{
      "title": "Passo 4",
      "element": "#globalLogo",
      "intro": "Sou o passo 4 para todo o conteúdo no elemento #globalLogo",
      "onchange": "console.log(\"I'm entering step 4 for everyone on the #globalLogo element\");"
    },{
      "title": "Passo 5",
      "element": "#globalLogo",
      "intro": "Sou o passo 5 para todo o conteúdo no elemento #globalLogo na posição direita",
      "position": "right",
      "onchange": "console.log(\"I'm entering step 5 for everyone on the #globalLogo element on right position\");"
    }]
}
{{</* /intro */>}}
Sou uma introdução