Transizioni

Le transizioni consentono di far entrare e uscire i componenti dalla vista all'interno della dashboard utilizzando varie animazioni. È possibile sfruttare cmdlet interattivi come Set-UDElement per modificare lo stato della transizione e far entrare un elemento.

Nell'esempio seguente, abbiamo una card che entra tramite una transizione Fade. Facendo clic sull'interruttore si attiva o disattiva la card.

New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Fade -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true

L'effetto risultante è il seguente.

Transition a card

Collapse

La transizione collapse comprime ed espande una sezione. È possibile specificare un'altezza di compressione per comprimere solo una porzione della sezione.

New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Collapse -CollapseHeight 100 -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true

Collapse Transition

Fade

Una transizione fade fa apparire e scomparire un componente in dissolvenza, come visto nell'esempio precedente. È possibile configurare il valore di timeout per specificare il numero di secondi necessari per completare la transizione.

New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Fade -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true

Slide

La transizione slide sposta un componente in posizione. È possibile determinare la posizione dello scorrimento specificando il parametro -SlideDirection.

New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Slide -SlideDirection 'left' -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true

Slide Transition

Grow

La transizione grow fa apparire in dissolvenza e ingrandisce un componente fino a portarlo in posizione.

New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Grow -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true

Grow Transition

Zoom

La transizione zoom porta un componente in posizione con un effetto di zoom.

New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Zoom -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true

Zoom Transition

API

• New-UDTransition