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.
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
