Demo page with examples

[kamilkisiela]

Things to be done:

• [x] codepen.io template (here)
• [x] base
• [x] example for each type
• [ ] example for each wrapper
• [ ] example for each template manipulator
• [ ] live edit

Feel free to contribute. How to add an example?

[bojancai]

how about md-subheader for several fields? just like html tag 'fieldset'. can see there already has fieldGroup conception

[kamilkisiela]

@bojancai I'm going to think about customizing fieldGroup but for now it would be the 1.X feature, after stable release will be released.

[seangwright]

@kamilkisiela where were you planning on hosting these demos? The Angular Formly uses a lot of jsBin, which is doable, but is that the best choice? Sometimes it feels clunky.

I'm interested in contributing to this part of the project if you can give me some direction on what you would like to see.

[kamilkisiela]

@sgwatgit The plan is to build dedicated website hosted on herokuapp.com. It will consume a lot of time. But wouldn't be nice? :)

Draft:

• ./demo directory in this repo (so we can keep it up to date and it will be deployed on heroku on each push)
• place for all fields configurations (json files or something like that)
• mutual component to create each example and also with outputs of field configuration object and model object. (it will make work just easier)
• maybe live editing but I think the best option will be something like "redirect to codepen.io" link (just like on each demo at material.angularjs.org)

Maybe you have another idea?

[kamilkisiela]

But I think I'm going to use meteor.com instead of heroku.

@sgwatgit We can collaborate on demo if you want.

[kamilkisiela]

Codepen template http://codepen.io/kamilkisiela/pen/RraLmz

[seangwright]

@kamilkisiela I should have some time this week to help work on this.

How do you intend to keep the ./demo example code consistent with the codepen example code? If a demo is updated then the codepen example will need updated so that when a user clicks on "redirect to codepen.io" they see the same code/example.

[kamilkisiela]

@sgwatgit Hi :)

I have a lot of work right now so demo page has to wait.

The main idea is to create demo page with examples. Each example will contain a link to codepen.io so user can live code on it. We can achieve this by using POST + prefill feature.

We will keep all examples in html, css and js files. And with use of some build process we can move it to JSON files or something like that.

I'm going to work on it on Saturday.

[kamilkisiela]

@sgwatgit

I posted new demo branch. (it's now on master) You can see it working here - formly-material.meteor.com.

---

Feel free to add more examples :)

I'm open for any changes in demo. It's now very chaotic and ugh...

---

Each example goes to demo/client/data/examples directory.

Adding example:

Examples.set(
    'input', // demo id - which is a value of id parameter (formly-material.meteor.com/demo/:id)
    { // formly configuration
        fields: [],
        model: {},
        options: {},
        form: {}
      }, 
    'types/input.md' // it is auto-prefixed with link/to/docs/
);

Adding example in menu:

Menu.addChild(
    'types',  // add link to `Types` section
    'input', // add label
    'input' // add id (demo/:id) - if label is the same as id you can skip it
);

[ejbaker]

I don't know quite where to put this, but an excellent user made a working file-upload using bootstrap templates, so I modified it a bit...

http://jsbin.com/timuxa/edit?html,css,js,output

I don't know quite what to do with the label... maybe always have it float? Or follow the datepicker example? But it works. :)

(Note the override on the label template to add "upload" to the types... this could probably be done a bit more gracefully, but it's so nice to have a simple solution like this! I wanted to share.)