AppLauncher
Tipo: Componente Angular
- DesignersFigma Design System 2.0
- Devs · HTML/CSSmds-stylesAinda não disponível
- Devs · Angularmds-angular Storybook com inputs e outputs
Definição Funcional
Seção intitulada “Definição Funcional”O AppLauncher é um seletor de produtos que permite a alternância rápida entre os diferentes sistemas do ecossistema Mobiis. Ele apresenta os módulos disponíveis de forma categorizada, oferecendo uma visão clara do portfólio e facilitando a navegação multi-produto.
Anatomia e Diretrizes de Escrita
Seção intitulada “Anatomia e Diretrizes de Escrita”- Identidade da Marca (Header): Exibe o logotipo Mobiis para reforçar que todos os itens pertencem ao mesmo ecossistema.
- Nome do Produto (Título): Identificador principal do módulo (geralmente uma sigla técnica ou nome comercial). Use Caixa de Título.
- Exemplo: TMS, Roteirizador, Torre de Controle.
- Descrição do Produto: Frase curta que resume a proposta de valor do módulo. Use Caixa de Sentença.
- Exemplo: Gestão de transporte ou Roteirização simplificada.
- Elementos Visuais: Cada item deve conter um ícone distintivo em um contêiner (box) colorido ou neutro para facilitar o reconhecimento visual imediato.
- Indicador de Navegação: Seta lateral (
chevron_right) indicando que o item é clicável e levará a uma nova URL ou contexto.
Para desenvolvedores
Seção intitulada “Para desenvolvedores”Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.
Angular (mds-angular)
Seção intitulada “Angular (mds-angular)”Seletor
Seção intitulada “Seletor”mds-app-launcher
Apresente mensagens contextuais para ações típicas dos usuários, usando este punhado flexível de mensagens de alerta.
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'd-contents' |
Classe CSS customizada adicionada ao host |
type |
'button' | 'custom' |
'button' |
Tipo de exibição do seletor |
items |
MdsAppLauncher[] |
[] |
Itens do launcher |
isOrdered |
boolean |
true |
Avalia os itens por ordem alfabética |
groupLicensed |
boolean |
true |
Organiza a lista separando itens licenciados e não licenciados |
disabled |
boolean |
false |
Desabilita o clique no item |
activeItemId |
string | number | null |
null |
Id do item ativo |
variant |
MdsButtonVariants |
'control' |
Variações de alerta |
size |
MdsSizes |
'md' |
Tamanhos de alerta |
Outputs
Seção intitulada “Outputs”| Output | Payload | Descrição |
|---|---|---|
onClick |
MdsAppLauncher |
Evento emitido ao clicar em um item do launcher |