npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-formly-templates-ionic

v1.2.2

Published

Angular-Formly plugin which outputs plain html form fields.

Downloads

24

Readme

Gitter

Angular-Formly: Ionic Framework Templates

This is a template for angular-formly and Ionic. This library is not standalone and requires angular-formly to be present and loaded.

Install with Bower

$ bower install api-check angular-formly angular-formly-templates-ionic --save

Reference the files in your index.html

<!-- right below ionic.bundle.js -->
<script src="lib/api-check/dist/api-check.js"></script>
<script src="lib/angular-formly/dist/formly.js"></script>
<script src="lib/angular-formly-templates-ionic/dist/angular-formly-templates-ionic.js"></script>

Then import the templates into your project.

angular.module("myApp", ["ionic", "formlyIonic"])

And your're ready!

Documentation

See angular-formly for formly core documentation.

Common Properties

NOTE: All of these properties will be under the templateOptions property as of angular-formly 3.0.0


label (string)

label is used to add an html label to each field.

Default

undefined


required (boolean)

required is used to add the required attribute to a form field.

Default

undefined


disabled (boolean)

disabled is used to add the disabled attribute to a form field.

Default

undefined


placeholder (string)

placeholder is used to add placeholder text to some inputs.

Default

undefined


description (string)

description is used to add descriptive text to all inputs.

Default

undefined


addonLeft (object)

addonLeft is used to add an add-on on the left of a field. The object accepts three properties: text that sets a simple text, onClick will add a cursor:pointer and an ng-click to the addon (invoked with the options and scope), and class that sets classes to the add-on.

Default

undefined


addonRight (object)

addonRight is used to add an add-on on the right of a field. The object accepts three properties: text that sets a simple text, onClick will add a cursor:pointer and an ng-click to the addon (invoked with the options and scope), and class that sets classes to the add-on.

Default

undefined

Fields

Form Fields

Below is a detailed description of each form fields and its custom properties.

Input form field (with Placeholder labels)

Uses the placeholder attribute to simulate the input"s label. The input uses the <input> element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc..

Example text field

{
  "type": "input",
  "key": "firstName",
  "templateOptions": {
    "type": "text",
    "placeholder": "jane doe",
    "icon": "ion-person",
    "iconPlaceholder": true
  }
}

Input form field (with Inline labels)

Places a label to the left of the input element. When the user enters text the label does not hide. Note that there's nothing stopping you from also using a placeholder label too. Uses the placeholder attribute to simulate the input"s label. The input uses the <input> element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc..

Example text field

 vm.userFields = [
                {
                    "key": "username",
                    "type": "inline-input",
                    "templateOptions": {
                        "type": "text",
                        "label": "Username"
                    }
                }, {
                    "key": "password",
                    "type": "inline-input",
                    "templateOptions": {
                        "type": "password",
                        "label": "Password"
                    }
                }
            ];

Input form field (with Stacked labels)

Stacked labels always places the label on top of the input. The input uses the <input> element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc..

Example text field

  vm.userFields = [
                {
                    "key": "fname",
                    "type": "stacked-input",
                    "templateOptions": {
                        "type": "text",
                        "label": "First Name",
                        "placeholder": "First Name"
                    }
                }, {
                    "key": "lname",
                    "type": "stacked-input",
                    "templateOptions": {
                        "type": "text",
                        "label": "Last Name",
                        "placeholder": "Last Name"
                    }
                }, {
                    "key": "email",
                    "type": "stacked-input",
                    "templateOptions": {
                        "type": "email",
                        "label": "Email",
                        "placeholder": "Email"
                    }
                }
            ]

Input form field (with Floating labels)

Floating labels are just like Stacked Labels, except that their labels animate, or "float" up when text is entered in the input. The input uses the <input> element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc..

Example text field

 vm.userFields = [
                {
                    "key": "fname",
                    "type": "floating-input",
                    "templateOptions": {
                        "type": "text",
                        "label": "First Name",
                        "placeholder": "First Name"
                    }
                }, {
                    "key": "lname",
                    "type": "floating-input",
                    "templateOptions": {
                        "type": "text",
                        "label": "Last Name",
                        "placeholder": "Last Name"
                    }
                }, {
                    "key": "email",
                    "type": "floating-input",
                    "templateOptions": {
                        "type": "email",
                        "label": "Email",
                        "placeholder": "Email"
                    }
                }
            ]

Textarea form field

The textarea field creates multiline input with a textarea element. Currently Ionic template does not support label on input type, use placeholder instead.

lines (number, optional)

lines sets the rows attribute for the textarea element.

Example textarea field

{
  "type": "textarea",
  "key": "about",
  "templateOptions": {
    "placeholder": "Cats make me smile",
    "rows": 4
  }
}

Checkbox form field

The checkbox field allows checkbox input with a input element set to type="checkbox". It doesn"t have any custom properties.

Example checkbox field

{
  "type": "checkbox",
  "key": "checkThis",
  "templateOptions": {
    "label": "Check this box"
  }
}

Range form field

The range can take in selected Ionicons as the min and max icons. You can also change the color by using another class. Label is also supported.

Example range field

{
      "key": "volumeLevel",
      "type": "range",
      "templateOptions": {
        "label": "Volume",
        "rangeClass": "calm",
        "min": "0",
        "max": "100",
        "step": "5",
        "value": "25",
        "minIcon": "ion-volume-low",
        "maxIcon": "ion-volume-high"
      }
    }

Radio form field

The radio field allows choice input with a series of linked inputs, use type="radio".

options (array, required)

options is an array of options for the radio form field to display. Each option should be an object with a text(string or number) and value(string or number). You can also override the icon that is diplayed with the option by passing in the icon key with an Ionicon identifer.

Example radio field

{
  "key": "triedEmber",
  "type": "radio",
  "templateOptions": {
    "label": "Have you tried EmberJs yet?",
     "options": [{
         "value": "A",
         "text": "A",
         "icon": "ion-home"
       }, {
         "value": "B",
         "text": "B",
       }, {
         "value": "C",
         "text": "C",
       }]
  }
}

Select form field

The select field allows selection via dropdown using the select element.

options (array, required)

options is an array of options for the select form field to display. Each option should be an object with a name(string). You may optionally add a group or "id" to some or all of your options.

labelProp (string, optional)

labelProp is what is used for what is shown to the user. Defaults to name

valueProp (string, optional)

valueProp is what is used for the value assigned to the model. Defaults to value

groupProp (string, optional)

groupProp is what is used to group the options

Example

Example select field

{
    "key": "marvel3",
    "type": "select",
    "templateOptions": {
      "label": "Select with custom name/value/group",
      "options": [{
        "label": "Iron Man",
        "id": "iron_man",
        "gender": "Male"
      }, {
        "label": "Captain America",
        "id": "captain_america",
        "gender": "Male"
      }, {
        "label": "Black Widow",
        "id": "black_widow",
        "gender": "Female"
      }, {
        "label": "Hulk",
        "id": "hulk",
        "gender": "Male"
      }, {
        "label": "Captain Marvel",
        "id": "captain_marvel",
        "gender": "Female"
      }],
      "groupProp": "gender",
      "valueProp": "id",
      "labelProp": "label"
    }
  }

ToDos

  • Write tests

  • [x] Move to gulp