VerticalStepper

ViewImports

@using TWyTec.Blazor

@addTagHelper *, TWyTec.Blazor.Stepper

---

Propertys

Parameter/Property	Value
StepperClass	CSS Class
StepperItemClass	CSS Class
StepperItemButtonClass	CSS Class
StepperItemButtonActiveClass	CSS Class
StepperItemContentClass	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

<VerticalStepper>
    <StepperItem Header="1 Step">
        <p>Text</p>
    </StepperItem>
    <StepperItem Header="2 Step">
        <p>Text</p>
    </StepperItem>
    <StepperItem Header="3 Step">
        <p>Text</p>
    </StepperItem>
    <StepperItem Header="4 Step">
        <p>Text</p>
    </StepperItem>
</VerticalStepper>

---

Default CSS Classes

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

.TWyTecVerticalStepperItem {
    margin-left: 30px;
    border-left: 1px solid gainsboro;
    padding-left: 10px;
}

.TWyTecVerticalStepperItemContent {
    display: block;
    overflow: hidden;
    width: 100%;
}

.TWyTecVerticalStepperItemButton {
    cursor: pointer;
    height: 40px;
    width: 100%;
    color: gray;
}

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

.TWyTecVerticalStepperItemButtonActive {
    color: dodgerblue !important;
}