UI: Steps, Visibility, and Translate texts in components
I have 4 steps in my app. And I'd like to do some things:
1. In the first step, depending on the selected values, when clicking the continue button, I also want to automatically advance to the next step.
2. In addition, I want to hide the continue button depending on the values, and expand the text input to fill the screen until the end, where the button was.
3. I'd like to set my own text/translate all texts of components/properties (steps - "step 1 of 4" / "previous - next", pagination - "page 1 of 5", etc).
4. Show toast notifications (success, error, warning) in certain cases. E.g.: triggered in some in-line code from UI; when attempting to proceed to a next step (in some cases on successful advancement and in others on error, without using 'throw Error' as it displays a system error message before the one I send); etc.
4 Replies
1. Use setTab
setTab("c", 2) if the component name is c and you want to go to the third tab.
2. Hide button i do not think is possible. Do not understand text input, do it not fill the screen until the end? Your are talking about the text input with "consultant"?
3. AFAIK not possible
4. custom toast notification is not possible either as far as I know, but a great idea! You think like sendToast with message and a `sendErrorToast`` ? Should be trivial to add since it's build in to several componsents.
@Faton will prop look into here eventually and see what he can do.Thanks @sindresvendby !
1. Does the setTab command also work for the Stepper?
2. Right. Regarding the expanding text input, it would be the case if the button could become invisible and stop occupying space, conditionally. Then, the text input could automatically expand to occupy the space of the button as well.
If conditional CSS were allowed on all components, it would already make it easier for me to use 'hidden' with tailwind. One curiosity: when I currently use 'hidden', the space occupied by the component still remains.
3. ok. Do you know if there are plans to allow customizing these texts?
4. I thought something like https://svelte-french-toast.com/
Svelte French Toast
Buttery smooth toast notifications for Svelte. Lightweight, customizable, and beautiful by default.
1. Yes. It works for stepper also.
2. Yeah. I think that is out of scoop. Maybe you are able to do it yourself with css and javascript. But its not close to OOTB
3. Not that i'm aware of. Cant you live with it? If you are a paying Enterprise customer im sure you are able to convince them.
4. They already have a toast. Make sense to reuse that but give programmatically access to it.
1. Great!
2. Right.
3.
Cant you live with it? Certainly, for my personal use
4. it would be great to have access to it.
@sindresvendby About the setTab: I have a question. In the event handler of the "Continuar" (Continue) button, I execute a flow. I would like to automatically advance a step with the setTab depending on the result of this flow still on the button click.
Is it possible to execute actions in the transformer or is there an alternative?
Oops! I managed to make it work