Design System

# Instalação

Os componentes da Zoox são divididos em pacotes independentes. Cada pacote contém componentes com um objetivo específico, todos fazem parte do namespace @zoox-ui.

Os pacotes são separados da seguinte maneira:

  • @zoox-ui/components: é o core dos componentes. Baseado no vuetify (material design), ele expõe os componentes para criar a aplicação em geral, com tabelas, formulários e etc.

  • @zoox-ui/charts: é a biblioteca de gráficos. Ela contém alguns gráficos prontos para utilizar e são baseados na biblioteca @antv/g2.

TIP

Recomendamos fortemente que se utilize o preset do Design System com a CLI do Vue.

# Criação de um projeto com o Design System

Como os componentes utilizam o Vuetify como base é necessário ter ele instalado no projeto com a versão 2.x.

Para facilitar a instalação da maneira mais correta, é possível utilizar o preset do zoox-design-system.

# Criar um projeto utilizando a Vue CLI

O seguinte comando irá criar um diretório com o nome do projeto, com o Design System já instalado e pré-cofigurado.

vue create --preset bitbucket:zooxcloud/zoox-design-system NOME_DO_PROJETO

Após rodar o comando, basta responder as perguntas e o projeto irá ser gerado conforme as necessidades indicadas.

# Processo manual

Caso seja necessário adicionar em um projeto existente, o processo é um pouco diferente. É necessário adicionar ele junto ao vuetify.

# Adicionar a Dependência

vue add vuetify
npm install @zoox-ui/components
yarn add @zoox-ui/components

# Instalar no projeto

Como requerimento, o projeto deve fazer uso do vuetify. O uso do tema é definido no Vuetify. Também é necessário adicionar os ícones customizados no projeto e indicar para o vuetify quais são eles.

// Adicionar no arquivo do vuetify
import ZooxComponents, {Theme, Icons} from "@zoox-ui/components";
import "@zoox-ui/components/zoox-design-system.css";

Vue.use(ZooxComponents);

const vuetify = new Vuetify({
  ...,
  theme: Theme,
  icons: {
    values: ZooxIcons
  }
})

# Instalação do @zoox-ui/charts

O pacote @zoox-ui/charts não tem nenhuma dependência de projeto. Basta adicionar o pacote e instalar como plugin do projeto e começar a usá-lo.

# Adicionar a Dependência

npm install @zoox-ui/charts
yarn add @zoox-ui/charts

# Instalar no projeto

import ZooxCharts from "@zoox-ui/charts";

Vue.use(ZooxCharts);

← Paleta de cores →