riot-mini-form riot tag (mini-form)
mini-form Riot JS signup and subscription miniature form component
Demonstration
A mini-form is a form that displays one or two emboldened inputs per page in a wizard like format. It can be used for newsletter sign-up, web sign-up etc. This mini-form is designed to work with RiotJS and can be included in your project via npm and browserify or some other dependecy packaging tools.
Getting Started
1. Installation
npm install riot-mini-form
2. Examples
Get Started Thanks for signing up { data.name }!
3. Tags
Mini-form Tag
Mini form tag is to a mini-form-item
what a ul
or ol
is to an li
.
Mini-form Tag Attributes
- animate-first-item-style="{{className}}" eg. 'flipInX', 'bounce' Tells mini-form which animation to use when first displaying the first item. Can be any animate.css or custom animation class
...
- animate-last-item-style="{{className}}" eg. 'rubberBand', 'jello'
Tells mini-form which animation to use after a specified delay on the last
mini-form-item
...
- animate-last-item-delay="{{milliseconds}}" eg. '2000' Milliseconds delay before animate-last-item animation is played
...
- restart-after="{{milliseconds}}" eg. '10000', '0'
Milliseconds delay before the form is remounted after completion. If '0' or no
restart-after
attribute is provided the form will not remount.
...
Mini-form-item Tag
Must be placed within a <mini-form>
, represents a page to be displayed in the mini-form's sequence
Mini-form-item Tag Attributes
- none available
Mini-form-input Tag Attributes
- field-name="{{string}}" eg. 'name', 'email'
The name of the data field that will be collected by the
mini-form
all data is available onmini-form
's data property for a field-name of 'name' the corresponding data property would bedata.name
- placeholder="{{string}}" eg. 'What is your name?'
The text taht will appear in the placeholder and input label
for a field-name of 'name' the corresponding data property would be
data.name
- data-required
The user must supply some value to proceed to the next
mini-form-item
- data-valid-email
The user must supply a loosely valid email value to proceed to the next
mini-form-item
Submitting form data
Form data can be submitted once the form has been populated by listening to the 'complete' event however mini-form does not provide a method to submit form data itself
Copyright and license
Copyright (c) 2015 Anycode lee@anycode.io
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.