-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from edenriquez/develop
🔥 First version Release of version 0.0.1 🚀
- Loading branch information
Showing
11 changed files
with
1,174 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
node_modules | ||
public |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,48 @@ | ||
# svelte-multistep-form | ||
# svelte multistep form | ||
|
||
Multi Step Form help to wrap form elements passing down styles to the component to be rendered, also it presents each form step in a ordered and stylish way. | ||
|
||
### Demo | ||
<p align="center"> | ||
<img width="570" src ="./screen/form-demo.gif"> | ||
</p> | ||
|
||
## Get started | ||
|
||
Download into your project | ||
|
||
```bash | ||
git clone https://github.com/edenriquez/svelte-multistep-form | ||
cd svelte-multistep-form | ||
npm i | ||
``` | ||
|
||
then import into your code | ||
|
||
```javascript | ||
import { Form, Step } from "<path>/<to>/MultiStepForm"; | ||
``` | ||
## Usage | ||
|
||
Firs you need to set up the form steps and initial config | ||
|
||
```javascript | ||
let multiStepOptions = { | ||
formTitle: "New Title ✍️", | ||
formSubtitle: "Subtitle should be here", | ||
stepsDescription: [ | ||
{ title: "STEP 1", subtitle: "All the details to perform on this step" }, | ||
{ title: "STEP 2", subtitle: "All the details to perform on this step" } | ||
] | ||
}; | ||
``` | ||
|
||
after that you only need to call `Form` and `Step` componente in the following way | ||
|
||
```javascript | ||
<Form {multiStepOptions}> | ||
<Step> | ||
// Here should be your form | ||
</Step> | ||
</Form> | ||
``` |
Oops, something went wrong.