Code Monkey home page Code Monkey logo

test-package's Introduction

FormlyMaterial

GitHub version Build Status Codacy Badge

Material Design Templates for Angular-Formly. Modern & flexible forms configured easily in a JSON object.

Install

npm install angular-formly-material

bower install angular-formly-material

meteor add wieldo:angular-formly-templates-material

Getting Started

  1. Add package using one of methods above
  2. Add the following dependencies to your AngularJS module:
angular.module('myAppName', [
    'formlyMaterial'
  ])

Requirements

  • angular ~ 1.4.0
  • angular-messages ~ 1.4.0
  • angular-material ~ 0.11.0
  • angular-formly ~ 7.3.0

Components

Any requests? Add issue!

Common properties

label (string)

theme (string)

md-theme attribute

Fields

input

{
  "type": "input",
  "key": "firstName",
  "templateOptions": {
    "type": "text",
    "label": "First name",
    "theme": "custom"
  }
}

textarea

rows (number, optional)

{
  "type": "textarea",
  "key": "bio",
  "templateOptions": {
    "label": "Biography",
    "theme": "custom",
    "rows": 5
  }
}

radio

options (array, requred)

labelProp (string, optional)

valueProp (string, optional)

{
  "type": "radio",
  "key": "name",
  "templateOptions": {
    "label": "Name",
    "theme": "custom",
    "labelProp": "firstName",
    "valueProp": "id",
    "options": [
        {"firstName": "Sarah", id: 1},
        {"firstName": "Jessica", id: 2},
        {"firstName": "Parker", id: 3}
    ]
  }
}

select

options (array, requred)

labelProp (string, optional)

valueProp (string, optional)

multiple (boolean, optional)

{
  "type": "select",
  "key": "name",
  "templateOptions": {
    "label": "Name",
    "theme": "custom",
    "multiple": true,
    "labelProp": "firstName",
    "valueProp": "id",
    "options": [
        {"firstName": "Sarah", id: 1},
        {"firstName": "Jessica", id: 2},
        {"firstName": "Parker", id: 3}
    ]
  }
}

checkbox

{
  "type": "checkbox",
  "key": "terms",
  "templateOptions": {
    "label": "Terms and Conditions",
    "theme": "custom"
  }
}

switch

{
  "type": "switch",
  "key": "terms",
  "templateOptions": {
    "label": "Terms and Conditions",
    "theme": "custom"
  }
}

datepicker

placeholder (string, optional)

md-placeholder

minDate (Date, optional)

md-min-date

maxDate (Date, optional)

md-max-date

filterDate (function, optional)

md-filter-date

{
  "type": "datepicker",
  "key": "start",
  "templateOptions": {
    "theme": "custom",
    "placeholder": "Start date",
    "minDate": minDate, // instance of Date
    "maxDate": maxDate, // instance of Date
    "filterDate": function(date) {
        // only weekends
        var day = date.getDay();
        return day === 0 || day === 6;
    }
  }
}

chips

placeholder (string, optional)

placeholder attribute value

secondaryPlaceholder (string, optional)

secondary-placeholder attribute value

deleteButtonLabel (string, optional)

delete-button-label attribute value

deleteHint (string, optional)

delete-hint attribute value

{
  "type": "chips",
  "key": "tags",
  "templateOptions": {
    "theme": "custom",
    "placeholder": "+tags",
    "secondaryPlaceholder": "Add tag",
    "deleteButtonLabel": "Remove",
    "deleteHint": "Remove tag"
  }
}

slider

min (number, optional)

default 1

max (number, optional)

default 100

step (number, optional)

default 1

discrete (boolean, optional)

default false (md-discrete)

{
    "type": "slider",
    "key": "rate",
    "templateOptions": {
        "theme": "custom",
        "min": 1,
        "max": 5,
        "step": 0.5,
        "discrete": true
    }
}

Wrappers

  • inputContainer (md-input-container)
  • label
  • messages (ng-messages)

Roadmap

  • add md-chips
  • add md-datepicker
  • add md-icon wrapper
  • add md-slider with min, max, step and discrete options
  • add md-select
  • multiple in md-select
  • add groups to md-select
  • add valueProp, labelProp to md-select
  • add md-radio with valueProp and labelProp
  • add textarea with cols and rows
  • md-theme
  • e2e tests

Requests (?). Post an issue.

test-package's People

Watchers

James Cloos avatar Kamil Kisiela avatar avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.