riot-mini-form v0.1.8
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
require('riot-mini-form')
<mini-form
animate-first-item-style="flipInY"
animate-last-item-style="rubberBand"
animate-last-item-delay="2000"
restart-after="10000">
<mini-form-item>
<mini-form-button onclick="{ parent.parent.next }">Get Started</mini-form-button>
</mini-form-item>
<mini-form-item>
<mini-form-input data-required field-name="name" placeholder="Your Name?"></mini-form-input>
</mini-form-item>
<mini-form-item>
<mini-form-input data-valid-email field-name="email" placeholder="Your Email?"></mini-form-input>
</mini-form-item>
<mini-form-item>
<mini-form-message >Thanks for signing up <em>{ data.name }</em>!</mini-form-message>
</mini-form-item>
</mini-form>
<script>
form = riot.mount('mini-form')[0];
form.on('complete', function(data) {
/* Now do something with the submitted form data
data = {
name: "???",
email: "???"
}
*/
})
</script>
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
<mini-form animate-first-item-style="flipInX">...</mini-form>
- 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
<mini-form animate-last-item-style="rubberBand">...</mini-form>
- animate-last-item-delay="{{milliseconds}}" eg. '2000' Milliseconds delay before animate-last-item animation is played
<mini-form animate-last-item-delay="2000">...</mini-form>
- 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 restart-after="6000">...</mini-form>
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-item></mini-form-item>
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
<mini-form-input field-name="name"></mini-form-input>
- 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
<mini-form-input field-name="name" placeholder="What is your name?"></mini-form-input>
- data-required
The user must supply some value to proceed to the next
mini-form-item
<mini-form-input data-required ></mini-form-input>
- data-valid-email
The user must supply a loosely valid email value to proceed to the next
mini-form-item
<mini-form-input data-valid-email ></mini-form-input>
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.