Transitions

Les transitions vous permettent de faire apparaître et disparaître des composants dans votre tableau de bord à l'aide de diverses animations. Vous pouvez tirer parti d'applets de commande interactives comme Set-UDElement pour modifier l'état de la transition et faire entrer un élément.

Dans l'exemple suivant, nous avons une carte qui apparaît au moyen d'un Fade. Cliquer sur l'interrupteur fait entrer et sortir la carte.

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'effet obtenu ressemble à ceci.

Transition a card

Collapse

La transition collapse replie et déplie une section. Vous pouvez spécifier une hauteur de repli pour ne replier qu'une portion de la section.

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

Une transition fade fait apparaître et disparaître un composant en fondu, comme on l'a vu dans l'exemple précédent. Vous pouvez configurer la valeur de délai pour spécifier le nombre de secondes nécessaires à l'exécution de la transition.

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 transition slide déplace un composant jusqu'à sa position. Vous pouvez déterminer la position du glissement en spécifiant le paramètre -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 transition grow fait apparaître un composant en fondu tout en l'agrandissant jusqu'à sa place.

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 transition zoom fait apparaître un composant à sa place par un effet de 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