SCI Material Design

Visão Geral

O SCI Material Design é uma biblioteca de componentes Vue.js que visa facilitar a criação de interfaces de usuário atraentes seguindo as diretrizes do Material Design do Google.

Instalação

1. Instale o Vue.js

Certifique-se de que você já tenha o Vue.js instalado em seu projeto. Caso contrário, você pode instalá-lo com o seguinte comando:

npm install vue
# ou
yarn add vue

2. Instale o SCI Material Design

Agora, instale o SCI Material Design com o seguinte comando:

npm install sci-material-design
# ou
yarn add sci-material-design

3. Instale as Dependências do Font Awesome e Material Design Icons (opcional)

Os ícones utilizados nos componentes dependem do Font Awesome e do Material Design Icons. Você pode instalar essas dependências com os seguintes comandos:

Para o Font Awesome:

npm install --save @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome

4. Importe os Componentes

Agora você pode importar os componentes do SCI Material Design em seu projeto. Por exemplo, em seu arquivo JavaScript principal (por exemplo, main.js):

import { createApp } from 'vue';
import App from './App.vue';
import { Button, Input } from 'sci-material-design';

const app = createApp(App);

app.component('Button', Button);
app.component('Input', Input);

app.mount('#app');

5. Use os Componentes

Agora você pode usar os componentes do SCI Material Design em seus arquivos Vue. Por exemplo, em um componente Vue:

<template>
  <div>
    <Button icon="user" color="primary" text="Click me" :radius="true" size="lg" @click="handleButtonClick">
      Entrar
    </Button>

    <Input color="primary" size="lg" radius placeholder="Digite seu texto" />
  </div>
</template>

<script>
import { Button, Input } from 'sci-material-design';

export default {
  components: {
    Button,
    Input
  },
  methods: {
    handleButtonClick() {
      alert('Botão clicado!');
    }
  }
};
</script>