Richiedere accesso API
Micro Frontend

Strumento di stile

Personalizza il micro-frontend modificando i design token e le opzioni di layout. Ogni parametro è spiegato, l'anteprima aggiorna lo stile in tempo reale e la chiamata mount() generata è pronta da incollare.

Preimpostazioni
Suggerisci da uno screenshot

Carica, trascina o incolla un PNG, JPEG o WebP (max 5 MB). Una versione ridotta e priva di metadati viene inviata al nostro fornitore IA per analizzare i ruoli visivi; il contrasto viene poi convalidato localmente. ADITUS conserva l’immagine originale e lo stile derivato per 6 mesi per il controllo qualità.

Trascina qui un’immagine
Puoi anche selezionare quest'area e incollare dagli appunti.

--aditus-accent

Colore principale del marchio: pulsanti, stati attivi, enfasi.

--aditus-accent-strong

Hover/tonalità premuta dell'accento.

--aditus-accent-contrast

Colore del testo/icona sopra l'accento.

--aditus-accent-soft

Tinta leggermente accentuata per riempimenti/hover morbidi.

--aditus-surface

Sfondo di pannelli, card e campi di input.

--aditus-surface-2

Superficie leggermente rialzata per i riempimenti nidificati.

--aditus-border

Colore del bordo sottile.

--aditus-border-strong

Bordo più marcato per input e controlli.

--aditus-text

Colore principale del corpo del testo.

--aditus-muted

Colore del testo attenuato o secondario.

--aditus-heading

Colore intestazione/titolo, più luminoso del corpo del testo.

--aditus-overlay-surface

Sfondo opaco della finestra modale con i dettagli dell'articolo. Quando Superficie è traslucida (temi glass), imposta un colore OPACO affinché la finestra mobile non diventi trasparente e il testo resti leggibile.

--aditus-overlay-backdrop

Maschera dietro la finestra dei dettagli. Per i temi scuri usa una maschera scura (ad es. rgba(0,0,0,0.6)), poiché il valore predefinito derivato dal testo risulterebbe troppo chiaro.

--aditus-success

Colore di successo: passaggi completati e segno di spunta.

--aditus-success-soft

Debole tinta di successo.

--aditus-danger

Colore di errore.

--aditus-danger-soft

Tinta errore debole.

--aditus-radius

Raggio d'angolo dei pannelli/schede.

--aditus-radius-sm

Raggio d'angolo degli ingressi/piccoli chip.

--aditus-radius-button

Raggio degli angoli dei pulsanti.

--aditus-gap

Spazio tra sezioni impilate all'interno di una fase.

--aditus-shadow

Box-ombra per pannelli/cartoncini rialzati.

--aditus-font

Stack della famiglia di caratteri per l'intero micro-frontend.

--aditus-font-size

Un'unica lunghezza CSS (ad es. 16px o 1rem) che ridimensiona l'INTERA tipografia: testo, metadati, controlli e titoli mantengono le proporzioni e crescono insieme. Valore predefinito: 15px.

Mostra il passaggio degli eventi come elenco verticale di righe o griglia di card. Ogni evento presenta soltanto le proprie informazioni e un unico pulsante di selezione.

La fase dell'articolo come un elenco verticale o una griglia di schede di livello di prezzo (creata tramite articleContent).

Come si strutturano gli articoli all'interno di un gruppo espanso del layout dell'elenco: una pila compatta o una griglia a più colonne reattiva.

Definisce come gli utenti selezionano gli articoli nel layout a elenco: un unico pulsante per riga oppure un selettore di quantità per ogni riga, con subtotali e un pulsante nel footer che aggiunge tutte le selezioni insieme.

Mostra l'icona per articolo (il piccolo SVG colorato che il vero negozio rende a sinistra di ogni biglietto) nel layout dell'elenco.

Mostra una grafica nell'header: il grande banner del brand dell'evento selezionato, a tutta larghezza sopra il flusso. Compare dopo la selezione di un evento.

Cultura inviata come intestazione Accept-Language — guida il contenuto localizzato dall'API (ad es. de-DE, en-GB).

Al cambio di passo, riallineare delicatamente il widget in vista (mai al montaggio iniziale). Disattivato se l'host riesce a scorrere.

Colonne delle opzioni di risposta per le domande RadioButtonList/CheckBoxList (1-4). Nei viewport stretti vengono nuovamente disposte in un'unica colonna.

Iniettare il tema predefinito neutro in bundle. Spegnilo quando spedisci la tua skin completa.

Anteprima dal vivo
Sfondo anteprimaSolo aiuto per lo styling — non un token Micro-Frontend. Il Micro-Frontend è trasparente ed eredita lo sfondo della tua pagina.
mount.ts
import { mount } from "@workspace/aditus-shop-embed";

mount(document.getElementById("aditus-shop")!, {
  publicKey: "pk_deine_seite",
  // sessionToken,  // required to activate the shop — minted by your backend, see "Micro Frontend"
  eventTheme: false,  // render your tokens, not the event organizer's branding
});

Vengono emessi solo i token modificati — quelli omessi mantengono i valori predefiniti in bundle.