@tray-tecnologia/design-system v4.3.0
Como usar
Para usar o Design System no seu projeto, execute o comando:
npm install @tray-tecnologia/design-system
Importações
Todos os componentes podem ser importados individualmente pelo nome global do pacote.
import { Button } from '@tray-tecnologia/design-system';
Caso deseja adicionar o Design System como um plugin da sua aplicação Vue com as diretivas já instaladas, use:
import { DS } from '@tray-tecnologia/design-system/setup';
Caso desejar importar os filtros ou as diretivas disponibilizadas pelo Design System:
import { initials } from '@tray-tecnologia/design-system/filters';
Caso deseja usar somente as diretivas:
import directives from '@tray-tecnologia/design-system/directives';
Caso precisar qualquer coisa relacionada aos estilos disponibilizados:
import '@tray-tecnologia/design-system/theme';
Vale ressaltar que a importação acima não engloba os estilos individuais dos componentes, somente a base usada por todo o Design System. Estão incluídos: normalização, helpers, mixins, tokens, variáveis, formulários, tabelas e tooltips.
Versões
Para as últimas alterações e versões, visite releases.
Desenvolvimento
Configuração básica
Para auxiliar no desenvolvimento desse pacote, siga os passos abaixo para executá-lo em sem ambiente local.
- Clone esse repositório;
- Execute
npm install
para instalar as dependencias; - Execute
npm run dev
para iniciar o desenvolvimento.
O projeto inclui uma instalação básica do Vue no qual poderá testar os componentes criados.
Usando localmente com outros projetos
Caso esteja trabalhando em alguma funcionalidade para o Design System e queira testar em outro projeto, siga os passos descritos.
- Execute
npm install
para instalar as dependencias; - Execute
npm link
para criar um link simbólico do pacote no seu ambiente global; - Acesse a pasta do outro projeto que deseja usar o Design System;
- Execute
npm link @tray-tecnologia/design-system
para usar a cópia do Design System loca no projeto;
Nesse modo, qualquer alteração realizada na pasta local do Design System deve refletir automaticamente no outro projeto.
Componentes Depreciados que serão removidos em breve
- TableList
- ButtonDarkMode
- Breadcrumb
- CardAnnotation
- FrameAnnotation
- CalloutCard
- FormHelper
- ListGroup
- ProgressIndeterminate
- Topbar
- StatsItem
- StatsGroup
- IconButton
- ButtonAction
Recomendamos não utilizar esses componentes em novos projetos, pois serão removidos em breve.
Documentação
O projeto inclui o Storybook, com instruções de uso dos componentes já criados. Para executar o Storybook basta executar npm run storybook
.
4 months ago
4 months ago
4 months ago
5 months ago
6 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago