Nodeschool Public Materials

    riot-mini-form

    0.1.8 • Public • Published

    riot-mini-form riot tag (mini-form)

    Build Status

    mini-form Riot JS signup and subscription miniature form component

    Demonstration

    riot-mini-form

    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 on mini-form's data property for a field-name of 'name' the corresponding data property would be data.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.

    Install

    npm i riot-mini-form

    DownloadsWeekly Downloads

    11

    Version

    0.1.8

    License

    ISC

    Last publish

    Collaborators

    • qrb