Transitions
Transition component for Universal Dashboard.
Transitions allow you to transition components in and out of view within your dashboard using various animations. You can take advantage of interactive cmdlets like Set-UDElement to change the transition state and cause an element to move in.
In the following example, we have a card that transitions in via a Fade. Clicking the switch the toggle the card in and out.
1
New-UDTransition -Id 'test' -Content {
2
New-UDCard -Text "Hey"
3
} -In -Fade -Timeout 1000
4
5
New-UDSwitch -OnChange {
6
Set-UDElement -Id 'test' -Properties @{
7
in = $EventData -eq 'True'
8
}
9
} -Checked $true
Copied!
The resulting effect looks like this.
Transition a card

Collapse

The collapse transition will collapse a section in and out. You can specify a collapse height to only collapse a portion of the section.
1
New-UDTransition -Id 'test' -Content {
2
New-UDCard -Text "Hey"
3
} -In -Collapse -CollapseHeight 100 -Timeout 1000
4
5
New-UDSwitch -OnChange {
6
Set-UDElement -Id 'test' -Properties @{
7
in = $EventData -eq 'True'
8
}
9
} -Checked $true
Copied!
Collapse Transition

Fade

A fade transition fades a component in and out as seen in the previous example. You can configure the timeout value to specify the number of seconds it takes to complete the transition.
1
New-UDTransition -Id 'test' -Content {
2
New-UDCard -Text "Hey"
3
} -In -Fade -Timeout 1000
4
5
New-UDSwitch -OnChange {
6
Set-UDElement -Id 'test' -Properties @{
7
in = $EventData -eq 'True'
8
}
9
} -Checked $true
Copied!

Slide

The slide transition moves a component into position. You can determine the position of the slide by specifying the -SlideDirection parameter.
1
New-UDTransition -Id 'test' -Content {
2
New-UDCard -Text "Hey"
3
} -In -Slide -SlideDirection 'left' -Timeout 1000
4
5
New-UDSwitch -OnChange {
6
Set-UDElement -Id 'test' -Properties @{
7
in = $EventData -eq 'True'
8
}
9
} -Checked $true
Copied!
Slide Transition

Grow

The grow transition will fade and grow a component into place.
1
New-UDTransition -Id 'test' -Content {
2
New-UDCard -Text "Hey"
3
} -In -Grow -Timeout 1000
4
5
New-UDSwitch -OnChange {
6
Set-UDElement -Id 'test' -Properties @{
7
in = $EventData -eq 'True'
8
}
9
} -Checked $true
Copied!
Grow Transition

Zoom

The zoom transition will zoom a component into place.
1
New-UDTransition -Id 'test' -Content {
2
New-UDCard -Text "Hey"
3
} -In -Zoom -Timeout 1000
4
5
New-UDSwitch -OnChange {
6
Set-UDElement -Id 'test' -Properties @{
7
in = $EventData -eq 'True'
8
}
9
} -Checked $true
Copied!
Zoom Transition

API

Last modified 5mo ago