Costruzioni di stile per i moduli adattivi styling-constructs-for-adaptive-forms
Prerequisiti prerequisites
Conoscenza del CSS e del framework LESS.
Cosa può essere personalizzato what-can-be-customized
L'articolo elenca le classi css dei moduli adattivi disponibili al pubblico. È possibile sfruttare queste classi per assegnare uno stile a vari componenti di un modulo adattivo. Lo stile dei componenti di authoring, ad esempio finestre di dialogo e barre di stato contenenti avvisi, esula dall’ambito di questo articolo. Utilizzare questi costrutti di stile per creare stili (utilizzando CSS o Meno) solo quando non è possibile utilizzare i componenti di stile utilizzando editor a tema.
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 aiuta a ridurre le dimensioni del codice bundle e ne aumenta 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
È possibile modificare il tema di un modulo adattivo per assicurarne la coerenza con le pagine web in cui è incorporato il modulo adattivo.
Le modifiche nell’aspetto generale del modulo adattivo che utilizzano le proprietà CSS fanno generalmente parte di modifiche al tema. Le modifiche principali al "ok" del modulo adattivo, come le modifiche al layout e al posizionamento dei componenti, non sono considerate modifiche del tema.
In base al bootstrap, il seguente set di proprietà CSS definisce il tema di una pagina web:
- Colore sfondo
- Bordo (tipo, colore, spessore)
- Colore font
- Riempimento
- Margine
- Dimensione font
- AltezzaLinea
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
È possibile 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 di moduli adattivi, 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 descritti 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 di componenti e stili che è possibile modificare utilizzando le variabili.
Stile del contenitore container-styling
Un contenitore è il componente di primo livello. Altri pannelli e campi si trovano sotto il componente contenitore .
Stile del campo field-styling
I moduli adattivi includono vari tipi di campi. Ogni campo ha un nome di classe univoco, corrispondente al nome del campo. Il campo ha anche un nome di classe comune guideFieldNode.
I campi includono etichette, widget, descrizione della Guida (lunga e breve) e icone della Guida dei campi (punto interrogativo).
Stile etichetta label-styling
L’elemento HTML etichetta utilizzato per il campo include le classi sinistra o top a seconda che l’etichetta si trovi in alto o a sinistra.
Le regole CSS per l’etichetta vengono applicate utilizzando il guideFieldLabel etichetta. Se sei un autore, sovrascrivi questa regola per rendere visibili le modifiche personalizzate.
Stile dei Widget widgets-styling
A seconda del tipo, i widget includono anche classi. Comunemente, i widget includono guideFieldWidget classe. I widget forniti con HTML normalmente utilizzano l’input standard dell’elemento HTML e selezionano. Lo stile viene eseguito di conseguenza. Non puoi assegnare uno stile a un widget personalizzato modificando le variabili.
Limitazioni nello stile dei widget limitations-in-widget-styling
Lo stile dei campi mirati, obbligatori e disabilitati è limitato utilizzando le variabili. Tuttavia, è possibile modificarlo ignorando gli stili. Le restrizioni che utilizzano le variabili sono fornite principalmente per mantenere il numero di variabili sotto controllo. La restrizione può essere attenuata se l'aspetto di un campo cambia drasticamente perché si trova in uno degli stati discussi in precedenza.
Descrizione dell’Aiuto help-description
Un autore può specificare il contenuto della Guida nei campi utilizzando i componenti 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 sostituire lo stile della descrizione. La descrizione della Guida (lunga e breve) viene modificata utilizzando le variabili che iniziano con widgetshelp, come indicato nella tabella seguente:
Condizioni d’uso terms-and-conditions
Termini e condizioni (TnC ``) consente di specificare termini e condizioni. Puoi 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, uno dei seguenti costituisce un pulsante:
- input[type = text]
- pulsante
- elemento con classe .button
Codice HTML per il pulsante :
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
Punto interrogativo question-mark
Per i widget, viene visualizzato un punto interrogativoMark quando un autore aggiunge una lunga descrizione nel contenuto della Guida. Viene utilizzata l'icona predefinita fornita in bootstrap. Per utilizzare un’icona personalizzata, puoi personalizzare le icone del bootstrap.
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 di moduli adattivi consente di caricare file. Puoi anche personalizzare il widget utilizzando le variabili .
Stili navigazione navigator-styles
Sono disponibili quattro tipi di schede di navigazione. Sono disponibili schede a sinistra, in alto, nella procedura guidata e a soffietto. Ogni navigatore ha una classe diversa.
Di seguito è riportato il codice HTML per l’elemento navigatore schede (simile alle schede bootstrap):
<li>
tab title
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></span>
........................... 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>
Puoi modificare lo stile del navigatore utilizzando le regole CSS che selezionano gli elementi utilizzando discendente selettori. Ad esempio, per aggiungere uno stile decorativo testo al tag di ancoraggio:
Navigatore a 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 i navigatori a schede di stile (sia a sinistra che in alto) in base al fatto che abbiano navigatori nidificati/secondari/secondari.
La classe guideNavIcon fornisce un'icona predefinita ai navigatori a schede (sia sinistro che superiore) e ai navigatori della procedura guidata.
Stile del pannello panel-styling
Un pannello include una barra degli strumenti opzionale 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 sia al navigatore che al contenuto.
*La classe non è presente nel pannello principale (RootPanel).
Stile mobile mobile-styling
Barra delle intestazioni header-bar
Queste variabili influenzano la barra dell’intestazione visibile su un dispositivo mobile o su dispositivi a schermo piccolo che contengono il titolo del pannello e i navigatori successivi e posteriori.
Indicatore di scorrimento scroll-indicator
Queste variabili influenzano l’indicatore di scorrimento, che è una freccia arancione visualizzata su un dispositivo mobile o su piccoli schermi. Un indicatore di scorrimento indica che il contenuto è presente oltre la parte visibile dello schermo. Puoi scorrere verso il basso per vederlo. Quando premi 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 fisso della barra degli strumenti mobile.