Comments (15)
I see... Sorry, I misunderstood your issue, although it was clearly stated :)
This is not supported at the moment, I'll take a look over the weekend and possibly add it...
from react-multistep.
here is the part of docs that explains that:
https://github.com/srdjan/react-multistep#-new-you-can-also-use-style-props-for-the-navigation-buttons-and-change-how-they-look
I can see that docs for this are not clear and I'll fix that, meantime, here is an example app you can try:
import React from 'react'
import ReactDOM from 'react-dom'
import MultiStep from 'react-multistep'
import StepOne from './stepOne'
import StepTwo from './stepTwo'
import StepThree from './stepThree'
import StepFour from './stepFour'
const App = () => (
<div className='container'>
<MultiStep title: 'Order Workflow'}
activeStep={2}
prevButton={{title: 'Back','style:{ background: 'red' }}
nextButton={{title: 'Forward','style:{ background: 'green' }}
>
<StepOne title='Step 1'/>
<StepTwo title='Step 2'/>
<StepThree title='Step 3'/>
<StepFour title='Step 4'/>
</MultiStep>
<div className='app-footer'>
<h6>Use navigation buttons or click on progress bar for next step.</h6>
Code is on{' '}
<a href='https://github.com/Srdjan/react-multistep' target='_blank' rel='noreferrer'>
GitHub
</a>
</div>
</div>
)
ReactDOM.render(<App />, ##document.getElementById('root'))
So, because of this line:
<MultiStep activeStep={0} prevButton={{title: 'Before','style:{ background: 'red' }, title:
Previous button will have 'red' background and text will say: 'Before'
from react-multistep.
Ok but this will set <MultiStep activeStep={0} active step as 0 or what ever I set. What I want it let us say if I am on step 2 I would like change the button text as Submit. Also the last page button was disable by default how to do that. I am using the component by installing it from packages is it similar to the file you have in MultiStep.tsx or do I need to externally add that as per in the demo in to SRC folder?
Here is the one I am trying out
https://github.com/Github743/MultiStep
from react-multistep.
Here is the code
https://codesandbox.io/s/59gqjg
If you check the last step continue was disabled where I need to button text to be submit and enabled
from react-multistep.
I see... Sorry, I misunderstood your issue, although it was clearly stated :) This is not supported at the moment, I'll take a look over the weekend and possibly add it...
Thank you
from react-multistep.
I see... Sorry, I misunderstood your issue, although it was clearly stated :) This is not supported at the moment, I'll take a look over the weekend and possibly add it...
any luck on this?
from react-multistep.
yes, there is some progress, will try to finish it next weekend, only time I can work on it :(
should be able to close both this request & #110
from react-multistep.
yes, there is some progress, will try to finish it next weekend, only time I can work on it :( should be able to close both this request & #110
No problem just waiting for the fix to be available
from react-multistep.
ok, I have a working sample, you can see the demo here (and link to the code is below):
submit-demo.mov
Unfortunately, while doing this< I realized that it is better for MultiStep to stay focused on its only concern: navigation and leave it to child components to execute their own logic/actions...
What you want will still be possible, but MultiStep will only navigate and interact with child components only for validation purposes. Business logic Actions will be responsibility of child components. Also, navigation buttons appearance will change, to make it obvious that they are only for navigation. I'll add the example once v6.0.0 progresses a little bit more.
Alternatively, you could fork this pre-release and see if it works for your case better, but, just a warning, for my taste things are getting a bit too complicated with back and forth between the multistep and child components.
This branch commit where you can check the code:
https://github.com/srdjan/react-multistep/tree/140abe7ad946a6c9b32538248cbf2ebef4c92831
The code that enabled 'Submit' functionality, will be removed in the following commits
from react-multistep.
Thanks for the update, I will check and let you know
from react-multistep.
also, see here how nav buttons will look like in v6, it should make it nicer when you have action/submit buttons on child components:
from react-multistep.
also, see here how nav buttons will look like in v6, it should make it nicer when you have action/submit buttons on child components:
Do you have fiddle for the same like stackblitz or other?
from react-multistep.
no :(
you can just pull the v6 branch and run locally?
from react-multistep.
just to make it clear, if you couldn't play with it, this is how the last step could look like with 'Submit' button anywhere inside your own child component...
from react-multistep.
closing - but will reconsider improvements when v6 gets a little bit more complete
from react-multistep.
Related Issues (20)
- Story: Add ability to change styles from the hosting app HOT 1
- I can't change the labels of buttons HOT 2
- Fix: ReactDOM.render is no longer supported in React 18
- Can't build example HOT 4
- v6.0.0: Validation Between Steps HOT 1
- Steps in same color HOT 1
- The local development errors HOT 4
- Port header rotation to v6.0.0-alpha HOT 4
- v6.0.0: Add default style view to match v5.x.x
- v6.0.0: complete custom styling support
- Example app does not reflect what is hosted at https://srdjan.github.io/react-multistep/ HOT 2
- Trying to figure out how to customize step styling HOT 1
- Validation Issue HOT 1
- showNavigation={false} Not working HOT 1
- Enhancement : Validations can be added HOT 1
- 'Prev' button showing on first page HOT 3
- Build 5.3.1 Error HOT 3
- Remove Storybook, WebPack.... HOT 3
- Story: Deactivate the 'Next' button based on form validation HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-multistep.