MDS Angular Snippets
Snippets e autocomplete para os componentes do MDS no Angular. Abrir no Marketplace
Extensões do VS Code
Duas extensões da Fretefy deixam o VS Code mais próximo do MDS: uma acelera o uso dos componentes do mds-angular, a outra aplica a paleta do Mobiis ao editor.
Mobiis Theme
Temas de cores baseados na paleta do Mobiis Design System. Abrir no Marketplace
MDS Angular Snippets
Seção intitulada “MDS Angular Snippets”Coleção de snippets para os componentes do MDS em Angular, gerados a partir do código-fonte da biblioteca para refletir as APIs reais dos componentes. O objetivo é escrever menos, errar menos e manter a consistência no uso do @mobiis/mds-angular.
Instalação
Seção intitulada “Instalação”- Abra as Extensões do VS Code (
Ctrl/Cmd+Shift+X). - Busque por MDS Angular (ou pelo publicador Fretefy) e abra a extensão MDS Angular - Mobiis Design System.
- Clique em Instalar.
O que ela oferece
Seção intitulada “O que ela oferece”- Snippets essenciais por padrão: só as propriedades necessárias; o restante vem por variações.
- Enums como dropdown, com autocomplete contextual.
- Variações por sufixo, exemplos curados e blueprints de página.
- Documentação no hover e navegação até a definição do componente e o link do Storybook.
- Painel lateral “MDS Angular” com os componentes organizados por categoria.
- CodeLens com acesso rápido à documentação.
Prefixos de exemplo
Seção intitulada “Prefixos de exemplo”| Prefixo | Resultado |
|---|---|
mds-button, mds-button-all, mds-button-events |
Botão básico, com todas as propriedades e com eventos |
mds-input, mds-select, mds-checkbox |
Campos de formulário |
mds-card-slots |
Card com os slots |
mds-alert, mds-badge, mds-loader |
Feedback e status |
mds-menu, mds-topbar |
Navegação |
d-flex, padding-all--md, gap--sm, margin-b--lg |
Utilitários de layout do MDS |
Para a lista completa, digite mds- em um arquivo de template (.html) e veja as sugestões. Os componentes em si estão documentados na seção Componentes.
Mobiis Theme
Seção intitulada “Mobiis Theme”Temas de cores para o VS Code com a mesma paleta, os mesmos tons e o mesmo cuidado de legibilidade das interfaces do Mobiis. Foram pensados para reduzir o cansaço visual em sessões longas de código: sem preto ou branco puros, com cores de sintaxe pastel de baixa saturação e separação por tom e transparência em vez de bordas pesadas.
O azul da marca (#408afa) aparece de forma pontual: cursor, seleção e abas ativas. Erros, avisos, sucesso e informação mantêm estados semânticos legíveis.
Variantes
Seção intitulada “Variantes”| Tema | Descrição |
|---|---|
| Mobiis Dark | Fundo grafite com um leve tom azulado; indicado para o uso diário |
| Mobiis Dark Blue | Variação com fundo azul-marinho |
| Mobiis Light | Fundo claro sem excesso de brilho; bom para ambientes bem iluminados |
| Fretefy | Tema escuro original, da paleta de cores da Fretefy |
Instalação
Seção intitulada “Instalação”- Abra as Extensões do VS Code (
Ctrl/Cmd+Shift+X). - Busque por Mobiis Theme e clique em Instalar.
- Abra a Paleta de Comandos (
Ctrl/Cmd+Shift+P), execute Preferences: Color Theme e escolha um dos temas Mobiis.