HorizontalStepper

ViewImports

@using TWyTec.Blazor

@addTagHelper *, TWyTec.Blazor.Stepper

---

Propertys

Parameter/Property	Value
StepperClass	CSS Class
StepperNavClass	CSS Class
StepperNavButtonClass	CSS Class
StepperNavButtonActiveClass	CSS Class
StepperContentClass	CSS Class
SelectedIndex	int
StepperLinearMode	bool. Default ist false

---

Methodes

Methods	Description
void ChangeSelectedIndex(int index)	change index and reload
int GetSelectedIndex()	Get current index
void GoToNext()	Goto next step
void GoToPrevious()	Goto last step

---

HTML

<HorizontalStepper>
    <StepperItem Header="1 Name and Email">
        <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" placeholder="Email">
        </div>
        <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" placeholder="Name">
        </div>
    </StepperItem>
    <StepperItem Header="2 Adress">
        <div class="form-group">
            <label>Adress</label>
            <textarea class="form-control" rows="3"></textarea>
        </div>
    </StepperItem>
    <StepperItem Header="3 Done">
        <div class="text-center" style="margin: 50px;">
            Finish
        </div>
    </StepperItem>
</HorizontalStepper>

---

Default CSS Classes

.TWyTecHorizontalStepper {
    width: 100%;
    height: auto;
}

.TWyTecHorizontalStepperContent {
    position: relative;
    overflow: hidden;
    padding: 10px 15px 10px 15px;
}

.TWyTecHorizontalStepperNav {
    width: 100%;
    height: 40px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    
}

.TWyTecHorizontalStepperNavButton {
    color: gray;
    cursor: pointer;
    width: auto;
    margin: 0px;
    padding: 10px;
}

    .TWyTecHorizontalStepperNavButton:hover {
        color: dodgerblue !important;
    }

.TWyTecHorizontalStepperBtnActive {
    color: dodgerblue !important;
}