Hi
Yongkee Cho,
Greetings
from Syncfusion support.
The SfStepper component
supports templating via the <Template> tag directive. However,
the current component structure requires steps to be defined
using <StepperStep> tags, and dynamic data binding directly to
a datasource is not supported.
To
achieve your requirement, we have implemented a workaround in the attached
sample. By combining a @foreach loop
with <StepperStep> and
the <Template> directive, you can effectively generate
templated steps from your data.
We
have provided a sample for your reference.
Sample: https://blazorplayground.syncfusion.com/LXBnZBhGyFsZTHbw
Code
Snippet:
|
<SfStepper
ID="stepper" ActiveStep="0">
<ChildContent>
<StepperSteps>
@foreach (var step in StepData)
{
<StepperStep
Label="@step.Label"
IconCss="@step.IconCss"></StepperStep>
}
</StepperSteps>
</ChildContent>
<Template>
<div class="template-content">
<span
class="@context.IconCss"></span>
<br />
<span
class="e-label">@context.Label</span>
</div>
</Template>
</SfStepper>
private
List<StepModel> StepData = new List<StepModel>
{
new StepModel { Label = "User",
IconCss = "e-icons e-user" },
new StepModel { Label = "Address",
IconCss = "e-icons e-home" },
new StepModel { Label = "Payment",
IconCss = "e-icons e-settings" },
new StepModel { Label = "Confirm",
IconCss = "e-icons e-check" }
};
|
Please
review it to see if it meets your requirements.
Regards,
Praveen Sellappan
