Veja outros projetos NPM aqui.

Veja outros projetos aqui.

📋 Tabela de conteúdos

• 🛠️ Tecnologias
• ⚙️ Instalação
• 📦 Importação
• 📚 Como Usar

🛠️ Tecnologias

As seguintes tecnologias são utilizadas:

• VueJs
• PUG/JADE
• SCSS/SASS

⚙️ Instalação

npm install --save @desco/vue-example-code

Note que será necessário ter o NPM instalado para o comando funcionar.

📦 Importação

import exampleCode from '@desco/vue-example-code'

📚 Como Usar

<template>
  <exampleCode :code="code">
</template>

export default {
  components: exampleCode,
  data () {
    return {
      code: {
        title: 'Título;
        description: 'Minha Descrição';
        example: [
          {
            lang: 'html',
            name: 'Exemplo de HTML',
            icon: 'fab.fa-html5',
            content: `
<template lang="pug">
div(@click="onClick") Meu exemplo em HTML aqui
</template>
            `,
          },
          {
            lang: 'javascript',
            name: 'Exemplo de JS',
            icon: 'fab.fa-js',
            content: `
export default {
    methods: {
        onClick () {
            alert('Exemplo de JS!')
        }
    }
}
            `,
          },
        ]
      }
    }
  }
}

Parâmetros

| Nome | Tipo | Obrigatório | Padrão | Descrição | |---|---|---|---|---| | title | String | Não | - | O título do exemplo | | description | String | Não | - | A descrição do exemplo | | example | JSON/Array | Sim | - | JSON ou Array de JSONs contendo informações dos códigos que aparecerão em cada aba. | | example.lang | String | Não | - | Linguagem do código. Essa informação será usada na sintaxe do código assim como no ícone e título da aba (Caso não informado) | example.name | String | Não | A linguagem do código | Nome a ser exibido na aba do código | example.icon | String | Sim | Ícone da linguagem | Ícone a ser exbido na aba do código | example.content | String | Não | - | Código do exemplo |

Autor