Stile in linea dei componenti per moduli adattivi

È possibile definire l’aspetto e lo stile generali di un modulo adattivo specificando gli stili utilizzando editor a tema. Inoltre, puoi applicare stili CSS in linea ai singoli componenti Modulo adattivo e visualizzare in anteprima le modifiche al volo. Gli stili in linea sostituiscono lo stile fornito nel tema .

Applicare proprietà CSS in linea

Per aggiungere stili in linea a un componente:

  1. Aprire il modulo nell’editor moduli e modificare la modalità in modalità stile. Per passare alla modalità stile nella barra degli strumenti della pagina, tocca elenco a discesa canvas > Stile.

  2. Seleziona un componente nella pagina e tocca il pulsante di modifica pulsante di modifica. Proprietà di stile aperte nella barra laterale.

    È inoltre possibile selezionare i componenti dalla struttura gerarchica del modulo nella barra laterale. La struttura gerarchica del modulo è disponibile come Oggetti modulo nella barra laterale.

    In Stile In questa modalità è possibile visualizzare i componenti elencati in Oggetti modulo. Tuttavia, l’elenco Oggetti modulo nella barra laterale elenca i componenti, ad esempio campi e pannelli. I campi e i pannelli sono componenti generici che possono contenere componenti quali caselle di testo e pulsanti di scelta.

    Quando selezioni un componente dalla barra laterale, vengono visualizzati tutti i sottocomponenti elencati e le proprietà del componente selezionato. Puoi selezionare un sottocomponente specifico e formattarlo.

  3. Fai clic su una scheda nella barra laterale per specificare le proprietà CSS. Puoi specificare proprietà quali:

    • Dimension e posizione (Impostazione del display, imbottitura, altezza, larghezza, margine, posizione, indice z, float, trasparente, overflow)
    • Testo (famiglia di font, peso, colore, dimensione, altezza riga e allineamento)
    • Sfondo (Immagine e sfumatura, colore di sfondo)
    • Bordo (Larghezza, stile, colore, raggio)
    • Effetti (Ombra, Opacità)
    • Avanzate (Consente di scrivere CSS personalizzati per il componente)
  4. Allo stesso modo, puoi applicare gli stili ad altre parti di un componente, ad esempio Widget, Didascaliae Aiuto.

  5. Tocca Fine per confermare le modifiche o Annulla per eliminare le modifiche.

Esempio: stili in linea per un componente campo

Le immagini seguenti rappresentano un campo di testo prima e dopo l’applicazione degli stili in linea.

Componente casella di testo prima dell’applicazione dello stile in linea

Componente casella di testo prima di applicare proprietà di stile in linea

Osserva la modifica nello stile della casella di testo come mostrato nell’immagine seguente dopo aver applicato le seguenti proprietà CSS.

Selettore

Proprietà CSS

Valore

Effetto

Campo

border

Larghezza bordo =2 px

Stile bordo=Uniforme

Colore bordo=#1111

Crea un bordo largo 2 px nero intorno al campo

Casella di testo

background-color

#6495ED

Cambia il colore di sfondo in CornflowerBlue (#6495ED)

Nota: Nel campo del valore è possibile specificare un nome di colore o il relativo codice esadecimale.

Etichetta

Dimension e posizione > larghezza

100 px

Corregge la larghezza di 100 px per l’etichetta

Icona guida campo Testo > Colore font #2ECC40 Cambia il colore della faccia dell'icona della guida.

Descrizione lunga

text-align

center

Allinea al centro la descrizione lunga dell’aiuto.

Stile della casella di testo dopo l’applicazione dello stile in linea

Componente casella di testo dopo l’applicazione delle proprietà di stile in linea

Seguendo i passaggi descritti in precedenza, puoi selezionare e assegnare uno stile ad altri componenti, ad esempio pannelli, pulsanti di invio e pulsanti di scelta.

NOTA

Le proprietà dello stile variano a seconda del componente selezionato.

Copiare e incollare gli stili

È inoltre possibile copiare e incollare uno stile da un componente a un altro in un modulo adattivo. In Stile , tocca il componente e tocca l’icona Copia Copia.

Tocca l’altro componente dello stesso tipo e tocca l’icona Incolla Copia per incollare lo stile copiato. Puoi anche toccare l’icona Cancella stile Copia per cancellare lo stile applicato.

Impostare stili per diversi stati di un componente

Puoi impostare gli stili per diversi stati di un tipo di componente. I diversi stati includono: Focus, Disabilitato, Hover, Errore, Completatoe Obbligatorio.

Per definire lo stile per uno stato di un componente:

  1. In Stile , tocca il componente e tocca l’icona Modifica Modifica.

  2. Seleziona lo stato del componente utilizzando Stato elenco a discesa.

    Seleziona stato

  3. Definisci lo stile per lo stato selezionato del componente e tocca Salva per salvare le proprietà.

Puoi anche simulare gli stati di successo e di errore. Tocca l’icona Espandi per visualizzare l’icona Simulazione riuscita e Errore Simulazione opzioni.

Simulazione degli stati

In questa pagina