New-UDStepper

Sinossi

Crea un nuovo componente stepper.

Sintassi

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

Descrizione

Crea un nuovo componente stepper. Gli stepper possono essere utilizzati come moduli a più passaggi o per visualizzare informazioni in modo graduale.

Parametri

-Id

L'ID del componente. Per impostazione predefinita è un GUID casuale.

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

-ActiveStep

Imposta il passaggio attivo. Deve essere l'indice del passaggio.

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

-Children

I passaggi di questo stepper. Utilizzi New-UDStep per creare nuovi passaggi.

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

-NonLinear

Consente all'utente di procedere ai passaggi non in ordine.

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

-AlternativeLabel

Posiziona l'etichetta del passaggio sotto il numero del passaggio.

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

-OnFinish

Un blocco di script eseguito quando lo stepper è terminato.

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

Imposta l'orientamento dello stepper.

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

-NextButtonText

Il testo da visualizzare nel pulsante Avanti.

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

-BackButtonText

Il testo da visualizzare nel pulsante Indietro.

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

Il testo da visualizzare nel pulsante Annulla.

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

-ClassName

Una classe CSS da applicare allo stepper.

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

-Style

Una hashtable di stili da applicare allo stepper.

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

-Sx

Una hashtable di stili da applicare allo stepper.

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

Parametri comuni

Questo cmdlet supporta i parametri comuni: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable e OutVariable. Per maggiori informazioni, consulti about_CommonParameters.

Output

Esempi

Esempio 1: stepper di 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}
}

Crea un nuovo stepper con tre passaggi.

Esempio 2: NonLinear e 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

Crea un nuovo stepper con tre passaggi e le opzioni non lineare ed etichetta alternativa.

Esempio 3: orientamento 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'

Crea un nuovo stepper con tre passaggi e orientamento verticale.

Esempio 4: testo personalizzato dei pulsanti

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'

Crea un nuovo stepper con tre passaggi e testo personalizzato dei pulsanti.

Esempio 5: passaggio facoltativo

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

Crea un nuovo stepper con tre passaggi e un passaggio facoltativo.

Esempio 6: icone personalizzate

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

Crea un nuovo stepper con tre passaggi e icone personalizzate.

Esempio 7: convalida

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

Crea un nuovo stepper con tre passaggi e convalida.

Esempio 8: disabilitare il pulsante precedente

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

Crea un nuovo stepper con tre passaggi e disabilita il pulsante Indietro nel secondo passaggio.

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