New-UDStepper

Übersicht

Erstellt eine neue Stepper-Komponente.

Syntax

New-UDStepper [[-Id] <String>] [[-ActiveStep] <Int32>] [-Children] <ScriptBlock> [-NonLinear] [-AlternativeLabel] [-OnFinish] <Endpoint> [[-OnCancel] <Endpoint>] [[-OnValidateStep] <Endpoint>] [[-Orientation] <String>] [[-NextButtonText] <String>] [[-BackButtonText] <String>] [[-FinishButtonText] <String>] [[-CancelButtonText] <String>] [[-ClassName] <String>] [[-Style] <Hashtable>] [[-Sx] <Hashtable>] [<CommonParameters>]

Beschreibung

Erstellt eine neue Stepper-Komponente. Stepper können als mehrstufige Formulare oder zur schrittweisen Anzeige von Informationen verwendet werden.

Parameter

-Id

Die ID der Komponente. Standardmäßig ist dies eine zufällige GUID.

Required?                    false
Position?                    1
Default value                ([Guid]::NewGuid())
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-ActiveStep

Legt den aktiven Schritt fest. Dies sollte der Index des Schritts sein.

Required?                    false
Position?                    2
Default value                0
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Children

Die Schritte für diesen Stepper. Verwenden Sie New-UDStep, um neue Schritte zu erstellen.

Required?                    true
Position?                    3
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-NonLinear

Ermöglicht dem Benutzer, Schritte außerhalb der Reihenfolge zu durchlaufen.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-AlternativeLabel

Platziert die Schrittbezeichnung unter der Schrittnummer.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-OnFinish

Ein Skriptblock, der ausgeführt wird, wenn der Stepper abgeschlossen ist.

Required?                    true
Position?                    4
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-OnCancel

Required?                    false
Position?                    5
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-OnValidateStep

[Parameter()] [Endpoint]$OnCompleteStep,

Required?                    false
Position?                    6
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Orientation

Legt die Ausrichtung des Steppers fest.

Required?                    false
Position?                    7
Default value                horizontal
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-NextButtonText

Der Text, der in der Weiter-Schaltfläche angezeigt wird.

Required?                    false
Position?                    8
Default value                Next
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-BackButtonText

Der Text, der in der Zurück-Schaltfläche angezeigt wird.

Required?                    false
Position?                    9
Default value                Back
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-FinishButtonText

Required?                    false
Position?                    10
Default value                Finish
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-CancelButtonText

Der Text, der in der Abbrechen-Schaltfläche angezeigt wird.

Required?                    false
Position?                    11
Default value                Cancel
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-ClassName

Eine CSS-Klasse, die auf den Stepper angewendet wird.

Required?                    false
Position?                    12
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Style

Eine Hashtable mit Stilen, die auf den Stepper angewendet werden.

Required?                    false
Position?                    13
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Sx

Eine Hashtable mit Stilen, die auf den Stepper angewendet werden.

Required?                    false
Position?                    14
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

Allgemeine Parameter

Dieses Cmdlet unterstützt die allgemeinen Parameter: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable und OutVariable. Weitere Informationen finden Sie unter about_CommonParameters.

Ausgaben

Beispiele

Beispiel 1: Einfacher Stepper

New-UDStepper -Id 'stepper1' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep1'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep2'
    } -Label "Step 2"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep3'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
}

Erstellt einen neuen Stepper mit drei Schritten.

Beispiel 2: NonLinear und AlternativeLabel

New-UDStepper -Id 'stepper2' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep23'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep24'
    } -Label "Step 2"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep25'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -NonLinear -AlternativeLabel

Erstellt einen neuen Stepper mit drei Schritten sowie den Optionen für nicht-lineare und alternative Bezeichnungen.

Beispiel 3: Vertikale Ausrichtung

New-UDStepper -Id 'stepper3' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep5'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep6'
    } -Label "Step 2"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep7'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -Orientation 'vertical'

Erstellt einen neuen Stepper mit drei Schritten und vertikaler Ausrichtung.

Beispiel 4: Benutzerdefinierter Schaltflächentext

New-UDStepper -Id 'stepper4' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep8'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep9'
    } -Label "Step 2"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep10'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -NextButtonText 'Forward' -BackButtonText 'Reverse'

Erstellt einen neuen Stepper mit drei Schritten und benutzerdefiniertem Schaltflächentext.

Beispiel 5: Optionaler Schritt

New-UDStepper -Id 'stepper5' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep11'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep12'
    } -Label "Step 2" -Optional
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep13'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
}

Erstellt einen neuen Stepper mit drei Schritten und einem optionalen Schritt.

Beispiel 6: Benutzerdefinierte Symbole

New-UDStepper -Id 'stepper6' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep14'
    } -Label "Step 1" -Icon (New-UDIcon -Icon 'Check')
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep15'
    } -Label "Step 2" -Icon (New-UDIcon -Icon 'Check')
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep16'
    } -Label "Step 3" -Icon (New-UDIcon -Icon 'Check')
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
}

Erstellt einen neuen Stepper mit drei Schritten und benutzerdefinierten Symbolen.

Beispiel 7: Validierung

New-UDStepper -Id 'stepper7' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep17'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep18'
    } -Label "Step 2"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep19'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -OnValidateStep {
    if ($EventData.CurrentStep -eq 0 -and [string]::IsNullOrEmpty($EventData.txtStep17)) {
        New-UDValidationResult -ValidationError 'Step 1 is required'
    }
    else {
        New-UDValidationResult -Valid
    }
}

Erstellt einen neuen Stepper mit drei Schritten und Validierung.

Beispiel 8: Zurück deaktivieren

New-UDStepper -Id 'stepper8' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep20'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep21'
    } -Label "Step 2" -DisablePrevious
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep22'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
}

Erstellt einen neuen Stepper mit drei Schritten und deaktiviert die Zurück-Schaltfläche im zweiten Schritt.

[Component("Stepper", "WandMagicSparkles", "Creates a new card.")]