Removing or changing the stepper size in FluentWizard

[smedjes]

Hello!

I'm using the FluentWizard component to let a user configure a device on first use.
The devices varies in size all the way down to 7".
So in some of the steps it's really getting crowded, and I was wondering if there is a way to remove the Stepper entirely?
I have also messed around with the StepperSize property, but I don't really see a difference 🤔

Kind regards

[dvoituron]

You can't delete the entire stepper panel, because then it's no longer a wizard component 😁
You can use StepTitleHiddenWhen=”@GridItemHidden.XsAndDown" to hide step titles and summaries for specific sizes.

For small devices (7") I think this attribute and StepperPosition="StepperPosition.Top" can be the best choice. The result will be:

[smedjes]

Haha I guess not 😄
But I would still be able utilize defining my wizard steps and being able to go back using the "Back"-button etc.
I'm currently not using the stepper other than showing the icons;

What about resizing the icons, is that possible?

Thanks for the fast reply! 👍

[dvoituron]

You have two CSS variables to configure this:

--fluent-wizard-circle-size: 24px;
--fluent-wizard-spacing: 4px;

[smedjes]

Okay I'll do some tinkering with the variables. Thanks a lot! 🤗