Pedir acesso à API
Micro Frontend

Ferramenta de estilo

Aplique a sua marca ao micro-frontend ajustando os tokens de design e as opções de disposição. Cada parâmetro é explicado, a pré-visualização é atualizada em direto e a chamada mount() gerada fica pronta a colar.

Predefinições
Sugerir a partir de uma captura

Carregue, arraste ou cole uma imagem PNG, JPEG ou WebP (máx. 5 MB). Uma versão reduzida e sem metadados é enviada ao nosso fornecedor de IA para analisar os papéis visuais; depois, o contraste é validado localmente. A ADITUS conserva a imagem original e o estilo derivado durante 6 meses para controlo de qualidade.

Largue uma imagem aqui
Também pode colar com Ctrl+V ou Cmd+V neste separador.

--aditus-accent

Cor principal da marca: botões, estados ativos e elementos em destaque.

--aditus-accent-strong

Tonalidade do destaque ao passar o ponteiro ou premir.

--aditus-accent-contrast

Cor do texto/ícone acima do destaque.

--aditus-accent-soft

Tonalidade ténue de destaque para preenchimentos suaves e estados sob o ponteiro.

--aditus-surface

Fundo do painel/cartão/entrada.

--aditus-surface-2

Superfície ligeiramente elevada para preenchimentos aninhados.

--aditus-border

Cor do contorno fino.

--aditus-border-strong

Contorno mais forte para campos e controlos.

--aditus-text

Cor principal do texto do corpo.

--aditus-muted

Cor do texto esbatido ou secundário.

--aditus-heading

Cor dos títulos, mais clara do que a do corpo de texto.

--aditus-overlay-surface

Fundo opaco do modal de detalhe do artigo. Defina uma cor OPAQUE quando a superfície é translúcida (temas de vidro), para que a caixa de diálogo flutuante nunca fique transparente e o seu texto permaneça legível.

--aditus-overlay-backdrop

Scrim atrás do modal de detalhe. Utilize um ecrã escuro (por exemplo, rgba(0,0,0,0.6)) para temas escuros, em que o padrão derivado do texto seria um véu claro.

--aditus-success

Cor do sucesso: passos concluídos, verificação concluída.

--aditus-success-soft

Tonalidade fraca de sucesso.

--aditus-danger

Cor do erro.

--aditus-danger-soft

Tonalidade de erro fraca.

--aditus-radius

Raio de canto dos painéis/cartões.

--aditus-radius-sm

Raio de canto de entradas/chips pequenos.

--aditus-radius-button

Raio dos cantos dos botões.

--aditus-gap

Espaço entre secções empilhadas dentro de uma fase.

--aditus-shadow

Sombra das caixas para painéis e cartões elevados.

--aditus-font

Conjunto de famílias tipográficas para todo o micro-frontend.

--aditus-font-size

Um comprimento CSS (por exemplo, 16px ou 1rem) que dimensiona TODA a tipografia – o corpo do texto, os metadados, os controlos e os títulos mantêm as suas proporções e crescem juntos. Padrão: 15px.

A etapa do evento é apresentada como uma lista vertical de linhas ou uma grelha de cartões. Cada evento mostra apenas os seus dados e um único botão de seleção.

A etapa dos artigos é apresentada como uma lista vertical ou uma grelha de cartões por escalão de preço (definida através de articleContent).

Define a disposição dos artigos num grupo expandido da vista em lista: uma pilha compacta ou uma grelha responsiva com várias colunas.

Define como os utilizadores escolhem artigos na vista em lista: um botão de seleção por linha ou um seletor de quantidade por linha, com subtotais e um botão no rodapé que adiciona todas as escolhas de uma só vez.

Mostra, na vista em lista, o ícone de cada artigo (o pequeno SVG colorido que a loja real apresenta à esquerda de cada bilhete).

Mostra um elemento gráfico no cabeçalho: o grande banner da marca do evento selecionado, a toda a largura acima do fluxo. Surge assim que é selecionado um evento.

Definição regional enviada no cabeçalho Accept-Language — determina o conteúdo localizado da API (por exemplo, de-DE ou en-GB).

A cada mudança de etapa, realinha suavemente o widget na área visível (nunca na montagem inicial). Desative se o host gerir o deslocamento.

Número de colunas das opções de resposta das perguntas RadioButtonList/CheckBoxList (1-4). Ecrãs estreitos regressam a uma única coluna.

Injeta o tema neutro predefinido incluído. Desative esta opção quando disponibilizar o seu próprio tema completo.

Pré-visualização em direto
Fundo da pré-visualizaçãoÉ apenas um auxiliar visual, não um token do micro-frontend. O micro-frontend é transparente e herda o fundo da sua página.
mount.ts
import { mount } from "@workspace/aditus-shop-embed";

mount(document.getElementById("aditus-shop")!, {
  publicKey: "pk_deine_seite",
// sessionToken, // necessário para ativar a loja — criado pelo seu backend; consulte "Micro Frontend"
  eventTheme: false,  // apresenta os seus tokens, não a marca do organizador do evento
});

São emitidos apenas os tokens que alterou — os restantes mantêm os valores predefinidos do pacote.