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.
Copy 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 The resulting effect looks like this.
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.
Copy 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 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.
Copy 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
The slide transition moves a component into position. You can determine the position of the slide by specifying the -SlideDirection parameter.
Copy 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 Grow
The grow transition will fade and grow a component into place.
Copy 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 Zoom
The zoom transition will zoom a component into place.
Copy 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 API
