Skip to content
This repository has been archived by the owner on Jan 22, 2018. It is now read-only.

Demo page with examples #5

Open
3 of 6 tasks
kamilkisiela opened this issue Dec 18, 2015 · 10 comments
Open
3 of 6 tasks

Demo page with examples #5

kamilkisiela opened this issue Dec 18, 2015 · 10 comments

Comments

@kamilkisiela
Copy link
Collaborator

Things to be done:

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

Feel free to contribute. How to add an example?

@kamilkisiela kamilkisiela added this to the v1.0.0 milestone Dec 18, 2015
@bojancai
Copy link

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

@kamilkisiela
Copy link
Collaborator Author

@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
Copy link

@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
Copy link
Collaborator Author

@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
Copy link
Collaborator Author

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

@sgwatgit We can collaborate on demo if you want.

@kamilkisiela
Copy link
Collaborator Author

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

@seangwright
Copy link

@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
Copy link
Collaborator Author

@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
Copy link
Collaborator Author

@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
Copy link

ejbaker commented Feb 17, 2016

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.)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants