Costrutti di stile per i moduli adattivi styling-constructs-for-adaptive-forms
L’Adobe consiglia di utilizzare l’acquisizione dati moderna ed estensibile Componenti coreper creazione di un nuovo Forms adattivoo aggiunta di Forms adattivo alle pagine AEM Sites. Questi componenti rappresentano un progresso significativo nella creazione di Forms adattivi, garantendo esperienze utente straordinarie. Questo articolo descrive un approccio precedente all’authoring di Forms adattivi utilizzando i componenti di base.
Prerequisiti prerequisites
Conoscenza del CSS e del framework LESS.
Cosa può essere personalizzato what-can-be-customized
Nell’articolo sono elencate le classi css di moduli adattivi disponibili al pubblico. È possibile utilizzare queste classi per assegnare stili a vari componenti di un modulo adattivo. Lo stile dei componenti di authoring, come le finestre di dialogo e le barre di stato che visualizzano gli avvisi, esula dall’ambito di questo articolo. Utilizza questi costrutti di stile per creare stili (utilizzando CSS o meno) solo quando non sei in grado di assegnare stili ai componenti utilizzando editor temi.
Personalizzazione degli stili nei moduli adattivi customizing-styles-in-adaptive-forms
Il framework LESS semplifica il caso d’uso per personalizzare gli stili nei moduli adattivi. Il framework consente di definire gli stili utilizzando un set di variabili e funzioni (mixin). Il framework LESS consente di ridurre le dimensioni del codice in bundle e di aumentarne la riutilizzabilità.
Puoi personalizzare gli stili dei moduli adattivi nei seguenti modi:
- Modificare il tema
- Modificare lo stile del componente
Modifica del tema changing-theme
Puoi modificare il tema di un modulo adattivo per assicurarti che il suo aspetto sia coerente con le pagine web in cui il modulo adattivo è incorporato.
Le modifiche dell’aspetto generale del modulo adattivo che utilizzano proprietà CSS fanno generalmente parte delle modifiche al tema. Le modifiche principali dell’espressione "ok and feel" del modulo adattivo, come le modifiche di layout e posizionamento dei componenti, non sono considerate modifiche del tema.
In base al bootstrap, il seguente insieme di proprietà CSS definisce il tema di una pagina web:
- Colore sfondo
- Bordo (tipo, colore, spessore)
- Colore carattere
- Riempimento
- Margine
- Dimensione font
- LineHeight
Attualmente, le variabili LESS sono definite solo per queste proprietà dei vari elementi in un modulo adattivo.
Modifica dello stile del componente changing-component-style
Potete modificare l'aspetto, il layout, il posizionamento e la visibilità degli elementi. Per eseguire questa operazione, crea o aggiorna i file .css personalizzati per includere i costrutti di stile elencati in questo articolo.
Per applicare uno stile a un modulo adattivo, apri il modulo adattivo in per la modifica, apri le proprietà del contenitore per moduli adattivi e specifica il percorso del file CSS personalizzato nella scheda di base. Costrutti di stile predefiniti del modulo adattivo e sostituiti con i costrutti elencati nel file .css personalizzato.
Componenti components
I componenti discussi in questo articolo hanno le loro classi CSS predefinite. Puoi modificare le variabili per modificare gli stili nelle classi CSS. In alternativa, è possibile riscrivere l'intera classe. Questa sezione descrive le classi all’interno dei componenti e degli stili che è possibile modificare utilizzando le variabili.
Stile contenitore container-styling
Un contenitore è il componente di livello principale. Altri pannelli e campi si trovano sotto il componente contenitore.
Stile dei campi field-styling
I moduli adattivi includono vari tipi di campi. Ogni campo ha un nome di classe univoco, che è il nome del campo. Il campo ha anche un nome di classe comune guideFieldNode
.
I campi includono etichette, widget, descrizioni della Guida (descrizione lunga e breve) e icone della Guida in linea (punto interrogativo).
Stile etichetta label-styling
L’elemento HTML etichetta utilizzato per il campo include le classi left o top a seconda che l’etichetta sia in alto o a sinistra.
Le regole CSS per l’etichetta vengono applicate utilizzando guideFieldLabel etichetta. Se sei un autore, sovrascrivi questa regola per rendere visibili le modifiche personalizzate.
Stile widget widgets-styling
A seconda del tipo, i widget includono anche classi. Di solito, i widget includono guideFieldWidget
classe. I widget forniti con HTML normalmente utilizzano l’input e la selezione standard dell’elemento HTML. Lo stile viene eseguito di conseguenza. Non è possibile assegnare uno stile a un widget personalizzato modificando le variabili.
Limitazioni nello stile dei widget limitations-in-widget-styling
Lo stile dei campi attivati, obbligatori e disattivati è limitato utilizzando le variabili. Tuttavia, è possibile modificarlo ignorando gli stili. Le restrizioni che utilizzano le variabili sono fornite principalmente per mantenere sotto controllo il numero di variabili. La restrizione può essere attenuata se l'aspetto di un campo cambia drasticamente perché si trova in uno qualsiasi degli stati discussi in precedenza.
Descrizione della guida help-description
Un autore può specificare il contenuto della Guida nei campi utilizzando i componenti di descrizione breve e lunga. Entrambi i componenti hanno una classe comune .guideHelpDescription
e un'altra classe .long
/ .short
, a seconda del tipo di descrizione. Il contenuto della Guida è racchiuso in un elemento paragrafo per ignorare lo stile della descrizione. La descrizione della Guida (sia lunga che breve) viene modificata utilizzando le variabili che iniziano con widgetshelp, come indicato nella tabella seguente:
Termini e condizioni terms-and-conditions
I Termini e Condizioni (TnC ``) consente di specificare termini e condizioni. È possibile personalizzare il widget utilizzando le variabili descritte nella tabella seguente.
Pulsante button
I pulsanti sono anche widget. Tuttavia, il loro stile è leggermente diverso dai widget. Nei moduli adattivi, costituisce un pulsante uno dei seguenti elementi:
- input[type = text]
- pulsante
- element con classe .button
Codice HTML per pulsante:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
Punto interrogativo question-mark
Per i widget, un punto interrogativo viene visualizzato quando un autore aggiunge una descrizione lunga nel contenuto della Guida. Viene utilizzata l'icona predefinita fornita in bootstrap. Per utilizzare un'icona personalizzata, è possibile personalizzare le icone di avvio.
Tabella table
È possibile modificare il tema del colore per le righe di intestazione e corpo di una tabella utilizzando le seguenti variabili.
Allegato file file-attachment
Il widget File allegato dei moduli adattivi consente di caricare i file. Puoi anche personalizzare il widget utilizzando le variabili.
Stili navigatore navigator-styles
Sono disponibili quattro tipi di schede del navigatore. Queste includono le schede a sinistra, in alto, nella procedura guidata e nel Pannello a soffietto. Ogni navigatore ha una classe diversa.
Di seguito è riportato il codice HTML per l'elemento tab navigator (simile alle schede bootstrap):
<li>
<a>tab title</a>
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></code>
........................... repeatable buttons, if the repeatable configuration is set ................................
<div class = "repeatableButtons">
<button name="Add" class="Add"/>
<button name="Remove" class="Remove"/>
</div>
</a>
</div>
................................ panel content ..................................
</div>
</div>
È possibile modificare lo stile del navigatore utilizzando le regole CSS che selezionano gli elementi utilizzando discendente selettori. Ad esempio, per aggiungere uno stile di decorazione del testo al tag di ancoraggio:
Navigatore schede in alto:
.tab-navigators
li a {
text-decoration:
underline;
}
Tab navigator on left:
.tab-navigators-vertical
li a {
text-decoration:
underline;
}
Accordion navigator:
.accordion-navigators .guideHeader a .guideSummary {
text-decoration:
underline;
}
Wizard navigator:
.wizard-navigators
li a {
text-decoration:
underline;
}
Inoltre, esistono classi per assegnare uno stile ai navigatori delle schede (sia a sinistra che in alto) a seconda che dispongano di navigatori nidificati/secondari/secondari.
La classe guideNavIcon fornisce un'icona predefinita per i navigatori delle schede (sia a sinistra che in alto) e i navigatori delle procedure guidate.
Stile del pannello panel-styling
Un pannello include una barra degli strumenti facoltativa e il relativo contenuto.
Il nodo del pannello è diviso in navigatori e contenuti. Lì ``non è un componente di stile separato per il contenuto. Le variabili descritte vengono applicate al navigatore e al contenuto.
Il pannello più in alto (RootPanel) non ha questa classe.
Stile mobile mobile-styling
Barra intestazione header-bar
Queste variabili influenzano la barra dell’intestazione visibile su un dispositivo mobile o su dispositivi a schermo ridotto contenenti il titolo del pannello e i navigatori avanti e indietro.
Indicatore di scorrimento scroll-indicator
Queste variabili influenzano l'indicatore di scorrimento, che è una freccia arancione visualizzata su un dispositivo mobile o su dispositivi con schermo piccolo. Un indicatore di scorrimento indica che è presente contenuto oltre la parte visibile dello schermo. Puoi scorrere verso il basso per vederlo. Quando si preme la fine del contenuto, la freccia scompare.
Variabili specifiche del layout della barra degli strumenti fissa mobile mobile-fixed-toolbar-layout-specific-variables
Queste variabili nella tabella seguente influenzano il layout della barra degli strumenti mobile fissa.
Variabile specifica per il tema theme-specific-variable
Il Iscrizione semplice theme in /etc/clientlibs/fd/af/guidetheme/simpleEnrollment e la categoria guide.theme.simpleEnrollment
introduce anche alcune variabili. Se desideri creare un’iscrizione semplice per l’ottimizzazione del tema, puoi utilizzare le seguenti "variabili aggiuntive: