New-UDStepper

Résumé

Crée un nouveau composant stepper.

Syntaxe

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

Description

Crée un nouveau composant stepper. Les steppers peuvent être utilisés comme formulaires en plusieurs étapes ou pour afficher de l'information de manière progressive.

Paramètres

-Id

L'ID du composant. Il s'agit par défaut d'un GUID aléatoire.

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

-ActiveStep

Définit l'étape active. Il doit s'agir de l'index de l'étape.

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

-Children

Les étapes de ce stepper. Utilisez New-UDStep pour créer de nouvelles étapes.

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

-NonLinear

Permet à l'utilisateur de progresser vers des étapes dans le désordre.

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

-AlternativeLabel

Place l'étiquette de l'étape sous le numéro de l'étape.

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

-OnFinish

Un bloc de script qui est exécuté lorsque le stepper est terminé.

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

Définit l'orientation du stepper.

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

-NextButtonText

Le texte à afficher dans le bouton suivant.

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

-BackButtonText

Le texte à afficher dans le bouton retour.

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

Le texte à afficher dans le bouton annuler.

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

-ClassName

Une classe CSS à appliquer au stepper.

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

-Style

Une table de hachage de styles à appliquer au stepper.

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

-Sx

Une table de hachage de styles à appliquer au stepper.

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

Paramètres communs

Cette applet de commande prend en charge les paramètres communs : Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable et OutVariable. Pour plus d'information, voir about_CommonParameters.

Sorties

Exemples

Exemple 1 : Stepper de base

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

Crée un nouveau stepper avec trois étapes.

Exemple 2 : NonLinear et 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

Crée un nouveau stepper avec trois étapes ainsi que les options non linéaire et étiquette alternative.

Exemple 3 : Orientation verticale

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'

Crée un nouveau stepper avec trois étapes et une orientation verticale.

Exemple 4 : Texte de bouton personnalisé

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'

Crée un nouveau stepper avec trois étapes et un texte de bouton personnalisé.

Exemple 5 : Étape facultative

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

Crée un nouveau stepper avec trois étapes et une étape facultative.

Exemple 6 : Icônes personnalisées

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

Crée un nouveau stepper avec trois étapes et des icônes personnalisées.

Exemple 7 : Validation

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

Crée un nouveau stepper avec trois étapes et une validation.

Exemple 8 : Désactiver précédent

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

Crée un nouveau stepper avec trois étapes et désactive le bouton retour à la deuxième étape.

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