Cascading Style Sheets

È possibile utilizzare un foglio di stile a cascata (CSS) aggiungendo un file .css a una cartella pubblicata e passandolo poi al parametro -Stylesheets di New-UDDashboard.

Ad esempio, il file dashboard.ps1 avrebbe questo aspetto.

New-UDDashboard -Title "Server Monitor" -Content {


} -Stylesheets @("/assets/theme.css")

Potrebbe quindi configurare una cartella pubblicata per fornire il percorso assets. Ecco come si presenterà il contenuto di publishedFolders.ps1.

New-PSUPublishedFolder -RequestPath "/assets" -Path "C:\assets"

All'interno della cartella C:\assets, può inserire qualsiasi asset a cui desidera accedere tramite il percorso /assets.

Cartella assets

Può quindi creare un foglio di stile per manipolare qualsiasi parte della dashboard desideri.

.ud-dashboard > div {
    background-image: url("/assets/image.jpeg");
}

Questo produce una dashboard con un'immagine di sfondo del cane Austin che dorme in un mucchio di terra.

Determinare i nomi di classe corretti

Ogni componente Material UI dispone di una serie di nomi di classe globali che è possibile utilizzare per applicare stili in tutta la dashboard. Per determinare i nomi di classe corretti, può consultare la documentazione API di un particolare componente. È presente un elenco dei nomi di classe globali applicabili a quel componente.

Ad esempio, ecco la documentazione CSS per il componente Alert.

All'interno del file CSS, può utilizzare questi nomi di classe per sovrascrivere gli stili in tutta la dashboard. Se volesse impostare uno sfondo rosso per tutti gli avvisi di tipo success, potrebbe creare un file CSS come questo.

.MuiAlert-standardSuccess { background-color: red !important;  }