Übergänge

Übergänge ermöglichen es Ihnen, Komponenten mit verschiedenen Animationen in Ihrem Dashboard ein- und auszublenden. Sie können interaktive Cmdlets wie Set-UDElement nutzen, um den Übergangszustand zu ändern und ein Element einblenden zu lassen.

Im folgenden Beispiel haben wir eine Karte, die über einen Fade-Effekt eingeblendet wird. Ein Klick auf den Schalter blendet die Karte ein und aus.

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

Der resultierende Effekt sieht folgendermaßen aus.

Übergang einer Karte

Collapse

Der Collapse-Übergang klappt einen Abschnitt ein und aus. Sie können eine Collapse-Höhe angeben, um nur einen Teil des Abschnitts einzuklappen.

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-Übergang

Fade

Ein Fade-Übergang blendet eine Komponente ein und aus, wie im vorherigen Beispiel gezeigt. Sie können den Timeout-Wert konfigurieren, um die Anzahl der Sekunden festzulegen, die der Übergang benötigt.

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

Der Slide-Übergang schiebt eine Komponente in Position. Sie können die Position des Slides festlegen, indem Sie den Parameter -SlideDirection angeben.

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-Übergang

Grow

Der Grow-Übergang blendet eine Komponente ein und lässt sie an ihre Position wachsen.

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-Übergang

Zoom

Der Zoom-Übergang zoomt eine Komponente an ihre Position.

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-Übergang

API

• New-UDTransition