README

@desco/vue-example-code

Componente VueJS para exemplo de códigos.

🚀 Pronto para uso 🚀

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:

⚙️ 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