Applicazione dello stile a un contenitore
È possibile applicare lo stile a un contenitore utilizzando il tema di stile del mashup oppure direttamente nel pannello Proprietà stile. L'utilizzo delle proprietà di stile sostituisce l'applicazione di temi di stili globali per un widget specifico. Per default, l'applicazione dello stile ai contenitori viene eseguita utilizzando il tema di stile del mashup, ma è anche possibile usare le definizioni di stile. La proprietà UseTheme nel pannello Proprietà controlla la modalità di applicazione di temi per il contenitore.
Per visualizzare le proprietà del tema di stile per un contenitore, eseguire le operazioni indicate di seguito.
1. Selezionare un contenitore dal pannello Navigatore.
◦ In alternativa, fare clic su un'area vuota all'interno di un contenitore.
2. Fare clic sul pannello Proprietà stile.
3. Espandere lo stato Base. Le proprietà di stile sono elencate nella sezione Container.
È possibile passare dall'applicazione di un tema di stile alle definizioni di stile. Per utilizzare le definizioni di stile, attenersi alla procedura descritta di seguito.
1. Selezionare un contenitore.
2. Nel pannello Proprietà deselezionare la casella di controllo UseTheme.
3. Fare clic sul pannello Proprietà stile.
Al posto delle proprietà di stile vengono ora visualizzate le definizioni di stile.
CSS personalizzato
È possibile applicare diverse combinazioni di stili ai contenitori, ad esempio CSS personalizzati, temi di stile e proprietà di stile. Di seguito è riportato l'elenco delle priorità delle regole di stile, dalla più alta alla più bassa:
|
Priorità
|
Metodo di applicazione dello stile
|
Descrizione
|
|---|---|---|
|
Massima
|
Proprietà di stile
|
Stili applicati a un contenitore utilizzando il pannello Proprietà stile. È possibile utilizzare le proprietà di stile per ignorare gli stili di default applicati dal tema di stile.
|
|
CSS personalizzato del mashup
|
Regole CSS applicate alla scheda CSS personalizzato di un'entità mashup. Una regola CSS del mashup sostituisce la regola CSS del tema quando le regole hanno la stessa specificità.
|
|
|
CSS personalizzato del tema di stile
|
Regole CSS applicate alla scheda CSS personalizzato di un'entità tema di stile.
|
|
|
Minima
|
Tema di stile
|
Stili che vengono ereditati dal tema di stile applicato al mashup. È possibile utilizzare i temi per applicare stili di default coerenti a tutti i contenitori di un mashup.
|
In generale, il CSS a livello di mashup ha priorità maggiore rispetto al CSS del tema di stile. Tuttavia, la priorità può variare in base alla specificità delle regole CSS. Ad esempio, è possibile aumentare la specificità di una regola CSS personalizzata aggiungendo la regola !important a una proprietà come segue:
.containerClass > .widget-content {
margin: 50px !important;
padding: 25px !important;
}
margin: 50px !important;
padding: 25px !important;
}
 |
Si consiglia vivamente di utilizzare i temi e le proprietà degli stili anziché scrivere regole CSS personalizzate.
|
Proprietà di stile
È possibile specificare le proprietà di stile indicate di seguito.
|
Proprietà
|
Descrizione
|
|---|---|
|
background
|
Colore di sfondo del contenitore.
|
|
border-color
|
Colore delle linee del bordo.
|
|
border-radius
|
Raggio degli angoli del bordo. La proprietà si applica a tutti e quattro gli angoli del contenitore.
|
|
border-style
|
Stile delle linee del bordo. È possibile impostarlo su Dotted Dashed Solid Double Groove Ridge Inset Outset Inherit o None.
|
|
border-width
|
Larghezza delle linee del bordo.
|
È possibile utilizzare le proprietà di stile per configurare la spaziatura interna del contenitore in ThingWorx 9.3.3 o versioni successive utilizzando le seguenti proprietà:
• padding-bottom
• padding-left
• padding-right
• padding-top
Per ulteriori informazioni, vedere Configurazione di margini e spaziatura interna per i contenitori.
Personalizzazione delle proprietà di stile del contenitore
Nella tabella riportata di seguito sono elencati i valori delle proprietà di stile dell'elemento flexcontainer, confrontati con i valori personalizzati per un contenitore con stile applicato.
|
Stile/proprietà
|
Default
|
Con stile applicato
|
|---|---|---|
|
Proprietà
|
• background - #ffffff
• border-color - inherit
• border-radius - None
• border-style - None
• border-width - None
|
• background - #cccccc
• border-color - #AAE09F
• border-radius - 4px
• border-style - Solid
• border-width - 4px
|
|
Anteprima
|
 |
 |
|
|
I valori delle proprietà di stile di default derivano dal tema di stile del mashup.
|