Descripción general del componente paso a paso de Angular
El Ignite UI for Angular Stepper es un componente altamente personalizable que visualiza el contenido como un proceso y muestra su progreso dividiendo el contenido en pasos sucesivos. Aparece como una línea vertical u horizontal. Proporcionado por la biblioteca de componentes de Ignite UI para Angular, el componente paso a paso ofrece un flujo de trabajo similar al de un asistente y múltiples funciones como la validación de pasos, el estilo, la orientación y la navegación con el teclado.
Angular Ejemplo de Stepper
En este ejemplo de Angular Stepper, puede ver cómo los usuarios tienen la oportunidad de personalizar su tarjeta de crédito y pasan por el proceso en cinco pasos lógicos: seleccionar el tipo de tarjeta, agregar información comercial, completar información personal, proporcionar detalles de envío y confirmación. Tenga en cuenta que el cuarto paso en nuestra demostración de paso a paso Angular se habilita solo si el usuario marca la casilla de verificación en el segundo paso, lo que significa que su dirección postal es diferente de la dirección física de la empresa.
<igx-stepper #stepper [linear]="true"><igx-step #step1 [isValid]="!!selectedCard" [completed]="!!selectedCard"><spanigxStepTitle>Card Type</span><divigxStepContent [tabIndex]="-1"><h2class="sample-step-title">Choose your business credit card</h2><divclass="card-wrapper"><igx-card *ngFor="let card of cards" (click)="selectCard(card)"
[ngClass]="{'selected-card': selectedCard === card}" [tabIndex]="0"
(keydown)="handleKeyDown($event, card)"elevated><igx-badge *ngIf="selectedCard === card"value="Your current choice"></igx-badge><igx-card-media><imgsrc="{{card.img}}"alt=""></igx-card-media><igx-card-content><spanclass="card-currency">{{card.price}}</span><spanclass="card-title">{{card.offer}}</span><p>{{card.type}}</p><p>{{card.description}}</p></igx-card-content></igx-card></div></div></igx-step><igx-step #step2 [isValid]="businessInformationForm.form.valid" [completed]="businessInformationForm.form.valid"><spanigxStepTitle>Business information</span><divigxStepContent [tabIndex]="-1"><divclass="sample-row"><formclass="flex-form" #businessInformationForm="ngForm"><igx-input-grouptype="box"><inputigxInputname="name"id="name"type="text" [(ngModel)]="businessInformation.name"required /><labeligxLabelfor="name">Legal Business Name</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="physicalAddress"id="physicalAddress"type="text"
[(ngModel)]="businessInformation.physicalAddress"required /><labeligxLabelfor="physicalAddress">Business Physical Address</label></igx-input-group><divclass="form-row"><igx-input-grouptype="box"><inputigxInputname="city"id="city"type="text" [(ngModel)]="businessInformation.city"required /><labeligxLabelfor="city">City</label></igx-input-group><igx-selecttype="box"name="state" [(ngModel)]="businessInformation.state"required><igx-select-item *ngFor="let state of states" [value]="state">
{{state}}
</igx-select-item><labeligxLabel>State</label></igx-select><igx-input-grouptype="box"><inputigxInputname="zip"id="zip"type="text"pattern="[0-9]{5}" [igxMask]="'00000'"
[placeholder]="'#####'" [(ngModel)]="businessInformation.zip"required /><labeligxLabelfor="zip">ZIP Code</label></igx-input-group></div><igx-checkboxname="differentAddress" [(ngModel)]="businessInformation.differentAddress">
The mailing address is different than the business physical address
</igx-checkbox><igx-input-grouptype="box"><inputigxInputname="taxIdNumber"id="taxIdNumber"type="text"pattern="[9]{1}[0-9]{8}"
[placeholder]="'9##-##-####'" [igxMask]="'000-00-0000'"
[(ngModel)]="businessInformation.taxIdNumber"required /><igx-hint *ngIf="!businessInformationForm.controls['taxIdNumber']?.pristine
&& !businessInformationForm.controls['taxIdNumber']?.valid">
The Federal Tax ID Number should begin with 9
</igx-hint><labeligxLabelfor="taxIdNumber">Federal Tax ID Number</label></igx-input-group><p>Does this business operate outside the United States? <spanclass="sample-required">*</span></p><igx-radio-grouptype="box"name="nonUSBusinessActivity"alignment="vertical"
[(ngModel)]="businessInformation.nonUSBusinessActivity"required><igx-radioclass="radio-sample"value="true">
Yes
</igx-radio><igx-radioclass="radio-sample"value="false">
No
</igx-radio></igx-radio-group></form><igx-card *ngIf="selectedCard"><igx-card-content><divclass="sample-row sample-card"><imgsrc="{{selectedCard.img}}"alt=""><div><spanclass="card-currency">{{selectedCard.price}}</span><spanclass="card-title">{{selectedCard.offer}}</span><p>{{selectedCard.type}}</p><p>{{selectedCard.description}}</p></div></div></igx-card-content></igx-card></div><divclass="sample-step-actions"><buttonigxButton="contained" (click)="stepper.prev()">Back</button><buttonigxButton="contained" (click)="stepper.next()"
[disabled]="!businessInformationForm.form.valid">Continue</button></div></div></igx-step><igx-step #step3 [isValid]="personalInformationForm.form.valid" [completed]="personalInformationForm.form.valid"><spanigxStepTitle>Personal Information</span><divigxStepContent [tabIndex]="-1"><divclass="sample-row"><formclass="flex-form" #personalInformationForm="ngForm"><igx-input-grouptype="box"><inputigxInputname="firstName"id="firstName"type="text"
[(ngModel)]="personalInformation.firstName"required /><labeligxLabelfor="firstName">First Name</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="lastName"id="lastName"type="text"
[(ngModel)]="personalInformation.lastName"required /><labeligxLabelfor="lastName">Last Name</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="jobTitle"id="jobTitle"type="text"
[(ngModel)]="personalInformation.jobTitle"required /><labeligxLabelfor="jobTitle">Job Title</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="phoneNumber"id="phoneNumber"type="text"
[(ngModel)]="personalInformation.phoneNumber"required /><labeligxLabelfor="phoneNumber">Phone Number</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="email"id="email"type="email" [(ngModel)]="personalInformation.email"requiredemail /><labeligxLabelfor="email">Email Address</label></igx-input-group><igx-checkboxname="authorization" [(ngModel)]="personalInformation.authorization"required>
I confirm that I am authorized to borrow on behalf of this business. <spanclass="sample-required">*</span></igx-checkbox><divclass="sample-terms"><igx-checkboxname="agreementAccepted" [(ngModel)]="personalInformation.agreementAccepted"required>
I agree with the<spanclass="sample-required">*</span></igx-checkbox><a (click)="$event.stopPropagation()">Terms and Conditions</a></div></form><igx-card *ngIf="selectedCard"><igx-card-content><divclass="sample-row sample-card"><imgsrc="{{selectedCard.img}}"alt=""><div><spanclass="card-currency">{{selectedCard.price}}</span><spanclass="card-title">{{selectedCard.offer}}</span><p>{{selectedCard.type}}</p><p>{{selectedCard.description}}</p></div></div></igx-card-content></igx-card></div><divclass="sample-step-actions"><buttonigxButton="contained" (click)="stepper.prev()">Back</button><buttonigxButton="contained" (click)="stepper.next()"
[disabled]="!personalInformationForm.form.valid">Continue</button></div></div></igx-step><igx-step #step4 [disabled]="!businessInformation.differentAddress" [isValid]="shippingDetailsForm.form.valid"
[completed]="shippingDetailsForm.form.valid || (!businessInformation.differentAddress && step3.completed)"><spanigxStepTitle>Shipping Details</span><divigxStepContent [tabIndex]="-1"><divclass="sample-row"><formclass="flex-form" #shippingDetailsForm="ngForm"><igx-input-grouptype="box"><inputigxInputname="sfirstName"id="sfirstName"type="text"
[(ngModel)]="shippingDetails.firstName"required /><labeligxLabelfor="sfirstName">First Name</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="slastName"id="slastName"type="text"
[(ngModel)]="shippingDetails.lastName"required /><labeligxLabelfor="slastName">Last Name</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="mailingAddress"type="text" [(ngModel)]="shippingDetails.mailingAddress"required /><labeligxLabelfor="mailingAddress"id="mailingAddress">Mailing Address</label></igx-input-group><divclass="form-row"><igx-input-grouptype="box"><inputigxInputname="scity"id="scity"type="text" [(ngModel)]="shippingDetails.city"required /><labeligxLabelfor="scity">City</label></igx-input-group><igx-selecttype="box"name="sstate" [(ngModel)]="shippingDetails.state"required><igx-select-item *ngFor="let state of states" [value]="state">
{{state}}
</igx-select-item><labeligxLabel>State</label></igx-select><igx-input-grouptype="box"><inputigxInputname="szip"id="szip"type="text"pattern="[0-9]{5}" [placeholder]="'#####'"
[igxMask]="'00000'" [(ngModel)]="shippingDetails.zip"required /><labeligxLabelfor="szip">ZIP Code</label></igx-input-group></div></form><igx-card *ngIf="selectedCard"><igx-card-content><divclass="sample-row sample-card"><imgsrc="{{selectedCard.img}}"alt=""><div><spanclass="card-currency">{{selectedCard.price}}</span><spanclass="card-title">{{selectedCard.offer}}</span><p>{{selectedCard.type}}</p><p>{{selectedCard.description}}</p></div></div></igx-card-content></igx-card></div><divclass="sample-step-actions"><buttonigxButton="contained" (click)="stepper.prev()">Back</button><buttonigxButton="contained" (click)="stepper.next()"
[disabled]="!shippingDetailsForm.form.valid">Continue</button></div></div></igx-step><igx-step #step5><spanigxStepTitle>Confirmation</span><divigxStepContent [tabIndex]="-1"><divclass="success-message"><divclass="success-marker"><igx-icon>check</igx-icon></div><divclass="success-text"><h2class="sample-step-title">Your application for a business credit card has been sent
successfully!</h2><p>We will contact you within a few days.</p></div></div><igx-cardclass="sample-small-card" *ngIf="selectedCard"><igx-card-content><strongclass="sample-date">Application date: {{ today | date:'d MMM y' }}</strong><divclass="sample-row sample-card"><imgsrc="{{selectedCard.img}}"alt=""><div><spanclass="card-currency">{{selectedCard.price}}</span><spanclass="card-title">{{selectedCard.offer}}</span><p>{{selectedCard.type}}</p><p>{{selectedCard.description}}</p></div></div></igx-card-content></igx-card><divclass="sample-step-actions"><buttonigxButton="contained"
(click)="resetStepper(businessInformationForm, personalInformationForm, shippingDetailsForm)">Reset</button></div></div></igx-step></igx-stepper>html
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
A continuación se muestra un ejemplo que demuestra cómo lograr la funcionalidad anterior utilizando formularios reactivos Angular.
EXAMPLE
TS
HTML
SCSS
import { ChangeDetectorRef, Component, ViewChild } from'@angular/core';
import { FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from'@angular/forms';
import { IgxStepperComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, IgxCardComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSelectComponent, IgxSelectItemComponent, IgxMaskDirective, IgxCheckboxComponent, IgxHintDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxIconComponent, IgxBadgeComponent } from'igniteui-angular';
import { NgFor, NgClass, NgIf, DatePipe } from'@angular/common';
exportinterface BusinessInformation{
name: FormControl<string | null>,
physicalAddress: FormControl<string | null>,
city: FormControl<string | null>,
state: FormControl<string[] | null>,
zip: FormControl<number | null>,
taxIdNumber: FormControl<number | null>,
differentAddress: FormControl<boolean | null>,
nonUSBusinessActivity: FormControl<boolean | null>
}
exportinterface PersonalInformation{
firstName: FormControl<string | null>,
lastName: FormControl<string | null>,
jobTitle: FormControl<string | null>,
phoneNumber: FormControl<number | null>,
email: FormControl<string | null>,
authorization: FormControl<boolean | null>,
agreementAccepted: FormControl<boolean | null>
}
exportinterface ShippingDetails{
sfirstName: FormControl<string | null>,
slastName: FormControl<string | null>,
smailingAddress: FormControl<string | null>,
scity: FormControl<string | null>,
sstate: FormControl<string[] | null>,
szip: FormControl<number | null>
}
@Component({
selector: 'app-stepper-sample-reactive-forms',
styleUrls: ['./stepper-sample-reactive-forms.component.scss'],
templateUrl: './stepper-sample-reactive-forms.component.html',
imports: [IgxStepperComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, IgxBadgeComponent, NgFor, IgxCardComponent, NgClass, NgIf, IgxCardMediaDirective, IgxCardContentDirective, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSelectComponent, IgxSelectItemComponent, IgxMaskDirective, IgxCheckboxComponent, IgxHintDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxIconComponent, DatePipe]
})
exportclassStepperSampleReactiveFormsComponent{
@ViewChild('stepper', { static: true })
public stepper: IgxStepperComponent;
public today: Date = newDate();
public cards: any[] = [
{
img: 'https://www.infragistics.com/angular-demos-lob/assets/images/stepper/card-gold.png',
price: 400,
offer: 'STATEMENT CREDIT OFFER',
type: 'Business Customized Advanced',
description: 'Cash Mastercard'
},
{
img: 'https://www.infragistics.com/angular-demos-lob/assets/images/stepper/card-red.png',
price: 600,
offer: 'STATEMENT CREDIT OFFER',
type: 'Business Travel Advanced',
description: 'World Mastercard'
},
{
img: 'https://www.infragistics.com/angular-demos-lob/assets/images/stepper/card-blue.png',
price: 500,
offer: 'STATEMENT CREDIT OFFER',
type: 'Business Golden',
description: 'World Mastercard'
}
];
public states: string[] = [
'Alabama', 'Arizona', 'California', 'Colorado', 'Florida',
'Georgia', 'Hawaii', 'Illinois', 'Louisiana', 'Minnesota',
'Nevada', 'New York', 'New Jersey', 'Ohio', 'Texas', 'Virginia', 'Washington'
];
public selectedCard: any;
public businessInformation:FormGroup<BusinessInformation>;
public personalInformation:FormGroup<PersonalInformation>;
public shippingDetails:FormGroup<ShippingDetails>;
constructor(private cdr: ChangeDetectorRef) {
this.businessInformation = new FormGroup<BusinessInformation>({
name: new FormControl('', Validators.required),
physicalAddress: new FormControl('', Validators.required),
city: new FormControl('', Validators.required),
state: new FormControl(this.states, Validators.required),
zip: new FormControl(null, [Validators.required, Validators.pattern("[0-9]{5}")]),
taxIdNumber: new FormControl(null, [Validators.required,Validators.pattern("[9]{1}[0-9]{8}")]),
differentAddress: new FormControl(false, Validators.required),
nonUSBusinessActivity: new FormControl(null, Validators.required)
})
this.personalInformation = new FormGroup<PersonalInformation>({
firstName: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required),
jobTitle: new FormControl('', Validators.required),
phoneNumber: new FormControl(null, Validators.required),
email: new FormControl('', Validators.required),
authorization: new FormControl(false, Validators.requiredTrue),
agreementAccepted: new FormControl(false, Validators.requiredTrue)
})
this.shippingDetails = new FormGroup<ShippingDetails>({
sfirstName: new FormControl('', Validators.required),
slastName: new FormControl('', Validators.required),
smailingAddress: new FormControl('', Validators.required),
scity: new FormControl('', Validators.required),
sstate: new FormControl(this.states, Validators.required),
szip: new FormControl(null, [Validators.required, Validators.pattern("[0-9]{5}")])
})
};
public selectCard(card: any): void {
this.selectedCard = card;
this.cdr.detectChanges();
this.stepper.next();
}
public resetStepper(form1: FormGroup, form2: FormGroup, form3: FormGroup): void {
this.stepper.reset();
this.selectedCard = null;
form1.reset();
this.businessInformation.controls.differentAddress.setValue(false);
form2.reset();
this.personalInformation.controls.authorization.setValue(false);
this.personalInformation.controls.agreementAccepted.setValue(false);
form3.reset();
}
public handleKeyDown(evt: KeyboardEvent, card: any): void {
if (evt.key.toLowerCase() === ' ' || evt.key.toLowerCase() === 'spacebar' || evt.key.toLowerCase() === 'space') {
this.selectCard(card);
}
}
publicerrorMessages(){
if(this.businessInformation.controls.taxIdNumber.errors.required){
return"This field is required"
}
if(this.businessInformation.controls.taxIdNumber.errors.pattern){
return"The Federal Tax ID Number should begin with 9 and should have 9 digits"
}
}
}
ts
<igx-stepper #stepper [linear]="true"><igx-step #step1 [isValid]="!!selectedCard" [completed]="!!selectedCard"><spanigxStepTitle>Card Type</span><divigxStepContent [tabIndex]="-1"><h2class="sample-step-title">Choose your business credit card</h2><divclass="card-wrapper"><igx-card *ngFor="let card of cards" (click)="selectCard(card)"
[ngClass]="{'selected-card': selectedCard === card}" [tabIndex]="0"
(keydown)="handleKeyDown($event, card)"elevated><igx-badge *ngIf="selectedCard === card"value="Your current choice"></igx-badge><igx-card-media><imgsrc="{{card.img}}"alt=""></igx-card-media><igx-card-content><spanclass="card-currency">{{card.price}}</span><spanclass="card-title">{{card.offer}}</span><p>{{card.type}}</p><p>{{card.description}}</p></igx-card-content></igx-card></div></div></igx-step><igx-step #step2 [isValid]="businessInformation.valid" [completed]="businessInformation.valid"><spanigxStepTitle>Business information</span><divigxStepContent [tabIndex]="-1"><divclass="sample-row"><formclass="flex-form" [formGroup]="businessInformation"><igx-input-grouptype="box"><inputigxInputname="name"id="name"type="text"formControlName="name"required/><labeligxLabelfor="name">Legal Business Name</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="physicalAddress"id="physicalAddress"type="text"formControlName="physicalAddress"required /><labeligxLabelfor="physicalAddress">Business Physical Address</label></igx-input-group><divclass="form-row"><igx-input-grouptype="box"><inputigxInputname="city"id="city"type="text"formControlName="city"required /><labeligxLabelfor="city">City</label></igx-input-group><igx-selecttype="box"name="state"formControlName="state"required><igx-select-item *ngFor="let state of states" [value]="state">
{{state}}
</igx-select-item><labeligxLabel>State</label></igx-select><igx-input-grouptype="box"><inputigxInputname="zip"id="zip"type="text" [igxMask]="'00000'"
[placeholder]="'#####'"formControlName="zip"required /><labeligxLabelfor="zip">ZIP Code</label></igx-input-group></div><igx-checkboxname="differentAddress"formControlName="differentAddress">
The mailing address is different than the business physical address
</igx-checkbox><igx-input-grouptype="box"><inputigxInputname="taxIdNumber"id="taxIdNumber"type="text"
[placeholder]="'9##-##-####'" [igxMask]="'000-00-0000'"formControlName="taxIdNumber"required/><igx-hint *ngIf="businessInformation.controls.taxIdNumber.invalid && businessInformation.controls.taxIdNumber.touched">
{{errorMessages()}}
</igx-hint><labeligxLabelfor="taxIdNumber">Federal Tax ID Number</label></igx-input-group><p>Does this business operate outside the United States? <spanclass="sample-required">*</span></p><igx-radio-grouptype="box"name="nonUSBusinessActivity"formControlName="nonUSBusinessActivity"alignment="vertical"required><igx-radioclass="radio-sample"value="true">
Yes
</igx-radio><igx-radioclass="radio-sample"value="false">
No
</igx-radio></igx-radio-group></form><igx-card *ngIf="selectedCard"><igx-card-content><divclass="sample-row sample-card"><imgsrc="{{selectedCard.img}}"alt=""><div><spanclass="card-currency">{{selectedCard.price}}</span><spanclass="card-title">{{selectedCard.offer}}</span><p>{{selectedCard.type}}</p><p>{{selectedCard.description}}</p></div></div></igx-card-content></igx-card></div><divclass="sample-step-actions"><buttonigxButton="contained" (click)="stepper.prev()">Back</button><buttonigxButton="contained" (click)="stepper.next()"
[disabled]="!businessInformation.valid">Continue</button></div></div></igx-step><igx-step #step3 [isValid]="personalInformation.valid" [completed]="personalInformation.valid"><spanigxStepTitle>Personal Information</span><divigxStepContent [tabIndex]="-1"><divclass="sample-row"><formclass="flex-form" [formGroup]="personalInformation"><igx-input-grouptype="box"><inputigxInputname="firstName"id="firstName"type="text"formControlName="firstName"required /><labeligxLabelfor="firstName">First Name</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="lastName"id="lastName"type="text"formControlName="lastName"required /><labeligxLabelfor="lastName">Last Name</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="jobTitle"id="jobTitle"type="text"formControlName="jobTitle"required /><labeligxLabelfor="jobTitle">Job Title</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="phoneNumber"id="phoneNumber"type="text"formControlName="phoneNumber"required /><labeligxLabelfor="phoneNumber">Phone Number</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="email"id="email"type="email"formControlName="email"requiredemail /><labeligxLabelfor="email">Email Address</label></igx-input-group><igx-checkboxname="authorization"formControlName="authorization"required>
I confirm that I am authorized to borrow on behalf of this business. <spanclass="sample-required">*</span></igx-checkbox><divclass="sample-terms"><igx-checkboxname="agreementAccepted"formControlName="agreementAccepted"required>
I agree with the<spanclass="sample-required">*</span></igx-checkbox><a (click)="$event.stopPropagation()">Terms and Conditions</a></div></form><igx-card *ngIf="selectedCard"><igx-card-content><divclass="sample-row sample-card"><imgsrc="{{selectedCard.img}}"alt=""><div><spanclass="card-currency">{{selectedCard.price}}</span><spanclass="card-title">{{selectedCard.offer}}</span><p>{{selectedCard.type}}</p><p>{{selectedCard.description}}</p></div></div></igx-card-content></igx-card></div><divclass="sample-step-actions"><buttonigxButton="contained" (click)="stepper.prev()">Back</button><buttonigxButton="contained" (click)="stepper.next()"
[disabled]="!personalInformation.valid">Continue</button></div></div></igx-step><igx-step #step4 [isValid]="shippingDetails.valid" [completed]="shippingDetails.valid || (!businessInformation.controls.differentAddress && step3.completed)"><spanigxStepTitle>Shipping Details</span><divigxStepContent [tabIndex]="-1"><divclass="sample-row"><formclass="flex-form" [formGroup]="shippingDetails"><igx-input-grouptype="box"><inputigxInputname="sfirstName"id="sfirstName"type="text"formControlName="sfirstName"required /><labeligxLabelfor="sfirstName">First Name</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="slastName"id="slastName"type="text"formControlName="slastName"required /><labeligxLabelfor="slastName">Last Name</label></igx-input-group><igx-input-grouptype="box"><inputigxInputname="mailingAddress"type="text"formControlName="smailingAddress"required /><labeligxLabelfor="mailingAddress"id="mailingAddress">Mailing Address</label></igx-input-group><divclass="form-row"><igx-input-grouptype="box"><inputigxInputname="scity"id="scity"type="text"formControlName="scity"required /><labeligxLabelfor="scity">City</label></igx-input-group><igx-selecttype="box"name="sstate"formControlName="sstate"required><igx-select-item *ngFor="let state of states" [value]="state">
{{state}}
</igx-select-item><labeligxLabel>State</label></igx-select><igx-input-grouptype="box"><inputigxInputname="szip"id="szip"type="text"pattern="[0-9]{5}" [placeholder]="'#####'"
[igxMask]="'00000'"formControlName="szip"required /><labeligxLabelfor="szip">ZIP Code</label></igx-input-group></div></form><igx-card *ngIf="selectedCard"><igx-card-content><divclass="sample-row sample-card"><imgsrc="{{selectedCard.img}}"alt=""><div><spanclass="card-currency">{{selectedCard.price}}</span><spanclass="card-title">{{selectedCard.offer}}</span><p>{{selectedCard.type}}</p><p>{{selectedCard.description}}</p></div></div></igx-card-content></igx-card></div><divclass="sample-step-actions"><buttonigxButton="contained" (click)="stepper.prev()">Back</button><buttonigxButton="contained" (click)="stepper.next()"
[disabled]="!shippingDetails.valid">Continue</button></div></div></igx-step><igx-step #step5><spanigxStepTitle>Confirmation</span><divigxStepContent [tabIndex]="-1"><divclass="success-message"><divclass="success-marker"><igx-icon>check</igx-icon></div><divclass="success-text"><h2class="sample-step-title">Your application for a business credit card has been sent
successfully!</h2><p>We will contact you within a few days.</p></div></div><igx-cardclass="sample-small-card" *ngIf="selectedCard"><igx-card-content><strongclass="sample-date">Application date: {{ today | date:'d MMM y' }}</strong><divclass="sample-row sample-card"><imgsrc="{{selectedCard.img}}"alt=""><div><spanclass="card-currency">{{selectedCard.price}}</span><spanclass="card-title">{{selectedCard.offer}}</span><p>{{selectedCard.type}}</p><p>{{selectedCard.description}}</p></div></div></igx-card-content></igx-card><divclass="sample-step-actions"><buttonigxButton="contained" (click)="resetStepper(businessInformation, personalInformation, shippingDetails)">Reset</button></div></div></igx-step></igx-stepper>html
Para comenzar con el componente Ignite UI for Angular Stepper, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
cmd
Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxStepperModule en su archivo app.module.ts.
Alternativamente, a partir de 16.0.0, puede importar IgxStepperComponent como una dependencia independiente o usar el token IGX_STEPPER_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.
Ahora que tiene el módulo o las directivas Angular Stepper importados, puede comenzar con una configuración básica de y igx-stepper sus pasos. Ahora que tiene el módulo Angular Stepper o las directivas importadas, puede comenzar con una configuración básica del igx-stepper módulo o sus pasos.
Para cada paso, el usuario tiene la capacidad de configurar el indicador, título, subtítulo y contenido usando las directivas igxStepIndicator, igxStepTitle, igxStepSubtitle e igxStepContent de la siguiente manera:
<igx-stepper><igx-step><igx-iconigxStepIndicator>home</igx-icon><pigxStepTitle>Home</p><pigxStepSubtitle>Home Sub Title</p><divigxStepContent>
...
</div></igx-step></igx-stepper>html
Cambiar la orientación del paso a paso
Puede personalizar la orientación del paso a paso a través de la propiedad de orientación expuesta. Se necesita un miembro de la enumeración IgxStepperOrientation: Horizontal (valor predeterminado) o Vertical.
Orientación paso a paso horizontal
horizontal es el valor predeterminado para el igx-stepper orientación propiedad. Cuando el paso a paso está orientado horizontalmente, tiene la oportunidad de determinar si el contenido de los pasos se mostrará encima o debajo de los encabezados de los pasos. Esto podría lograrse estableciendo el Componente IgxStepper contenidoarriba propiedad booleana, cuyo valor predeterminado es false. En caso de que esté habilitado, el contenido de los pasos se mostrará encima de los encabezados de los pasos.
Orientación vertical del paso a paso
Puede cambiar fácilmente del diseño horizontal al vertical. Para cambiar la orientación predeterminada, debe establecer la propiedad de orientación en vertical.
IgxStepperComponent admite cuatro estados de pasos y cada uno de ellos aplica estilos diferentes de forma predeterminada:
activo: determina si el paso es el que se muestra actualmente. Por diseño, si el usuario no establece explícitamente el atributo activo de algún paso en true, el paso activo inicial sería el primer paso no deshabilitado.
deshabilitado: determina si se puede interactuar con el paso. De forma predeterminada, el atributo deshabilitado de un paso se establece en false.
Opcional: de forma predeterminada, el atributo opcional de un paso se establece en false. Si no se requiere la validez de un paso en el paso a paso lineal, entonces se puede habilitar el atributo opcional para poder avanzar independientemente de la validez del paso.
completado: de forma predeterminada, el atributo completado de un paso devuelve false. Sin embargo, el usuario puede anular este comportamiento de finalización predeterminado estableciendo el atributo de finalización según sea necesario. Cuando el paso se marca como completado, no solo se cambia el estilo del encabezado del paso de forma predeterminada, sino también el estilo de la línea de progreso entre el paso completado y el siguiente. Ambos estilos podrían modificarse utilizando las variables CSS expuestas.
IgxStepperComponent le brinda la oportunidad de configurar la lógica de validación para cada paso a través de la propiedad isValid vinculable bidireccional. En función de su valor, se decide si el usuario tendrá la capacidad de avanzar en el modo paso a paso lineal. De forma predeterminada, la propiedad isValid de un paso se establece en true.
Paso a paso lineal
El igx-stepper le brinda la oportunidad de establecer el flujo de sus pasos utilizando la propiedad lineal. De forma predeterminada, lineal se establece en false y el usuario puede seleccionar cualquier paso no deshabilitado en IgxStepperComponent.
Cuando la propiedad lineal se establece en true, el paso a paso requerirá que el paso no opcional actual sea válido antes de continuar con el siguiente.
Si el paso no opcional actual no es válido, no podrá avanzar al siguiente paso hasta que valide el actual.
La validez de los pasos opcionales no se tiene en cuenta para seguir adelante.
El siguiente ejemplo demuestra cómo configurar un paso a paso lineal:
restablecer: restablece el paso a paso a su estado inicial.
El método de reinicio no borrará el contenido del paso. Esto debe hacerse manualmente.
Personalizando los pasos
El Ignite UI for Angular Stepper te da la posibilidad de configurar diferentes opciones para títulos, indicadores y mucho más.
Esto podría lograrse mediante la propiedad stepType de IgxStepperComponent. Se necesita un miembro de la enumeración IgxStepType:
Completo (valor predeterminado)
Indicador
Título
Lleno
Si se definen títulos y subtítulos, con esta configuración se representarán tanto los indicadores como los títulos.
El usuario también tendría la capacidad de definir la posición del título de los pasos, de modo que podría colocarse antes, después, encima o debajo del indicador de paso. El usuario puede configurar la posición del título utilizando la propiedad titlePosition. Ambas propiedades son miembros de la enumeración IgxStepperTitlePosition:
fin
comenzar
abajo
arriba
Cuando el igx-stepper está orientado horizontalmente, el valor predeterminado de la posición del título es bottom.
Cuando la orientación se establece en diseño vertical, la posición del título por defecto es end.
La propiedad titlePosition solo se aplica cuando la propiedad stepType stepper está configurada en full.
Indicador
Si desea mostrar solo indicadores para los pasos, configure la opción stepType en indicator.
El indicador de pasos admite cualquier contenido, pero con la restricción de que su tamaño será siempre de 24 píxeles. Teniendo esto en cuenta, recomendamos utilizar IgxIconComponent o IgxAvatarComponent como indicadores de pasos.
Título
Si desea mostrar solo títulos para los pasos, configure la opción stepType en title.
De esta manera, si se definen subtítulos, también aparecerán debajo del título del paso.
Este contenedor se puede cambiar de plantilla según sus necesidades sin restricciones de tamaño. Por ejemplo, podría agregar un indicador con un tamaño superior a 24 píxeles en su interior.
El siguiente ejemplo muestra todos los tipos de pasos expuestos y cómo podrían cambiarse:
IgxStepperComponent también le permite personalizar los indicadores representados para pasos activos, no válidos y completados. Esto podría lograrse mediante las directivas igxStepActiveIndicator, igxStepInvalidIndicator e igxStepCompletedIndicator:
Estas plantillas se aplicarían para todos los pasos con el estado correspondiente.
Angular Animaciones paso a paso
Angular animaciones paso a paso brindan a los usuarios finales una hermosa experiencia al interactuar con los pasos definidos. Las opciones de animación disponibles difieren en función de la orientación del paso a paso.
Cuando el paso a paso está orientado horizontalmente, está configurado para usar la animación slide de forma predeterminada. También admite fade como alternativa. Las animaciones se configuran a través de la entrada horizontalAnimationType.
En un diseño orientado verticalmente, el tipo de animación se puede definir utilizando la propiedad verticalAnimationType. De forma predeterminada, su valor grow y el usuario también tiene la capacidad de configurarlo para que se fade.
Establecer none en ambas entradas de tipo de animación deshabilita las animaciones paso a paso.
IgxStepperComponent le brinda la posibilidad de configurar la duración de la transición entre los pasos. Esto podría lograrse mediante la propiedad AnimationDuration, que toma un número como argumento y es común para ambas orientaciones.
Navegación por teclado
Angular Stepper proporciona una amplia variedad de interacciones de teclado para el usuario final. Esta funcionalidad está habilitada de forma predeterminada y permite a los usuarios finales navegar fácilmente por los pasos. La navegación IgxStepperComponent cumple con los estándares de accesibilidad W3 y es cómoda de usar.
Combinaciones de teclas
Tabulador: mueve el foco al siguiente elemento tabulado
Shift + Tab: mueve el foco al elemento tabable anterior
Flecha hacia abajo: mueve el foco al encabezado del siguiente paso accesible cuando el igx-stepper está orientado verticalmente.
Flecha hacia arriba: mueve el foco al encabezado del paso accesible anterior cuando el igx-stepper está orientado verticalmente.
Flecha hacia la izquierda: mueve el foco al encabezado del paso accesible anterior en ambas orientaciones.
Flecha hacia la derecha: mueve el foco al encabezado del siguiente paso accesible en ambas orientaciones.
Inicio: mueve el foco al encabezado del PRIMER paso habilitado en igx-stepper
Fin: mueve el foco al encabezado del ÚLTIMO paso habilitado en igx-stepper
Intro/Espacio: activa el paso actualmente enfocado
Por diseño, cuando el usuario presiona la tecla Tab sobre el encabezado del paso, el foco se moverá al contenedor de contenido del paso. En caso de que se deba omitir el contenedor, el desarrollador debe configurar el contenedor de contenido [tabIndex]="-1".
Primero, para utilizar las funciones expuestas por el motor de temas, necesitamos importar el archivo index en nuestro archivo de estilo:
@use"igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:// @import '~igniteui-angular/lib/core/styles/themes/index';scss
Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el tema paso a paso y pasamos los parámetros que nos gustaría cambiar: