PowerShell Universal
Ironman SoftwareForums
v2
v2
  • About
  • Get Started
  • Additional Resources
  • Installation
    • Docker
    • Upgrading
  • Licensing
  • System Requirements
  • Supported Browsers
  • Cmdlet Help
  • Templates
  • API
    • About
    • Endpoints
    • Security
    • Error Handling
    • Rate Limiting
  • Automation
    • About Automation
    • Scripts
      • Parameters
    • Jobs
    • Schedules
    • Terminals
    • Triggers
  • User Interfaces
    • About
    • Dashboards
      • Building Dashboards
      • Components
        • Dashboards
        • Pages
        • Dynamic Regions
        • Element
        • Error Boundary
        • HTML
        • Building Custom Components
        • Data Display
          • Alert
          • Chip
          • Date and Time
          • Icon
          • List
          • Table
          • Tree View
          • Typography
        • Data Visualization
          • Charts
          • Map
        • Feedback
          • Backdrop
          • Modal
          • Progress
          • Skeleton
        • Inputs
          • Autocomplete
          • Button
          • Checkbox
          • Code Editor
          • Date Picker
          • Editor
          • Floating Action Button
          • Form
          • Radio
          • Select
          • Slider
          • Switch
          • Textbox
          • Time Picker
          • Transfer List
          • Upload
        • Navigation
          • Drawer
          • Link
          • Menu
          • Stepper
          • Tabs
        • Layout
          • Grid Layout
          • Grid
          • Hidden
        • Utilities
          • Transitions
        • Surfaces
          • AppBar
          • Card
          • Paper
          • Expansion Panel
      • Interaction
      • Marketplace
      • Role Based Access
      • Scheduled Endpoints
      • Sessions
      • Themes
        • Cascading Style Sheets
        • Styles
      • Custom Variable Scopes
      • Migrating From Universal Dashboard 2.9
    • Pages
      • Alerts
      • Bar Chart
      • Button
      • Form
      • iFrame
      • Image
      • Line Chart
      • Liquid Chart
      • Paragraph
      • Statistic
      • Table
      • Variables
  • Platform
    • Cache
    • Desktop Mode
      • Hotkeys
    • Modules
    • Monitoring
    • Published Folders
    • Templates
    • Variables
  • Configuration
    • About
    • API
    • Environments
    • Git
    • Hosting
      • Azure
      • IIS
      • Single-File
    • Login Page
    • Management API
    • Settings
    • Security
      • Access Controls
      • App Tokens
      • Client Certificate
      • OpenID Connect
      • SAML2
      • WS-Federation
    • Repository
    • Running as a Service Account
  • Development
    • Debugging Scripts
    • Editor
    • Hangfire
    • Logging
    • Profiling
    • Visual Studio Code Extension
  • Changelog
  • Extension Changelog
  • Legacy Universal Dashboard Docs
Powered by GitBook

Copyright 2025 Ironman Software

On this page
  • Collapse
  • Fade
  • Slide
  • Grow
  • Zoom
  • API

Was this helpful?

  1. User Interfaces
  2. Dashboards
  3. Components
  4. Utilities

Transitions

Transition component for Universal Dashboard.

PreviousUtilitiesNextSurfaces

Last updated 3 years ago

Was this helpful?

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.

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.

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.

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.

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.

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.

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

New-UDTransition
Transition a card
Collapse Transition
Slide Transition
Grow Transition
Zoom Transition