Series: Material Design with ember-paper

Material Design with ember-paper-Awesome Forms

Published on May 25, 2016

Your forms deserve to be beautiful.


Links

Code

{{#paper-content class="md-padding centered-form"}}
  <h1>Most Important Facts</h1>
  {{paper-input value=taco label="Favorite Taco"}}
  {{paper-input value=jsframework label="Favorite Javascript Framework" required=true required-errortext="You might need jQuery"}}
  {{#paper-checkbox checked=isCoolPerson}}Microsoft Certified Solutions Associate{{/paper-checkbox}}

  <h3>How awesome is this form?</h3>
  <div layout layout-sm="column">
    {{#paper-radio value="1" selected=selectedValue}}So Rad{{/paper-radio}}
    {{#paper-radio value="3" selected=selectedValue}}Changed my life, dude{{/paper-radio}}
    {{#paper-radio value="2" selected=selectedValue}}Tubular{{/paper-radio}}
  </div>

  {{#paper-button raised=true}}Submit{{/paper-button}}
{{/paper-content}}

Transcript

Today we’re going to tell a story, a story about how this awesome, amazing tubular form came to be. But first let’s start off at the humble roots of this form. This is how the form started its life. Very, very sad. Here’s the markup that let this form get through the day. But then along came Ember Paper. It started off with just some small changes. For example, wrapping the entire thing in a paper-content block with the class of md-padding. This gave the form a little bit of breathing room, so it wasn’t crammed up against the side.

Next came the changing of some of the inputs. So instead of an input it’s a paper-input. Just this one change makes a huge difference. Notice how it has the place holder here instead of having it off to the left, and then when you click it goes up above. This all comes built in to the paper-input. And we can change this other input as well. And then we’ll notice that we don’t need the break tag. So let’s check that out. So this is looking really good and really consistent, but there’s more we can do with this.

So we want this to be required field, so we can put required=true, and then if I go here and leave without typing anything, it says This is required. That might not be the message that we always want, so we can add a required-errortext=, and we’ll say that “You might need jQuery”. And so then it’ll give us the text that we put in. And there are several things like this, and the pattern is the name of the requirement, then -errortext. You can also add in custom validations and multiple custom validations. But there are several besides required that are built in, including min, max, things like that.

So that’s enough about the input helper. Let’s go on to another type of input, the checkbox. So this will be done through the paper-checkbox component. So that means we can get rid of this type attribute, but we’ll keep our checked attribute. And then we’ll have to close it out since it’s a block component now, and we’ll see that this gets us a great checkbox with a really cool animation and really nice styling that fits in with everything else.

Next, we’ll tackle this button. So we’ll have a paper-button, and that will get rid of this tag, and we can close it, and this will get us something here, but we want it to look more button-y. So we’ll do raised=true. So that will give us the look we want.

Next we’ll tackle those radio buttons that we had in there before, and this is going to be a lot of text, so I’m just going to paste them in. So what we have here is we have a div that gives us our layout of column, and then we have three separate radio buttons, and we’re defining them separately so we can have different text in one, different value in each one. But it’s their selectedValue... they’re all going off the same selectedValue, and that’s what keeps them in sync. So here, we’ve got once again a sweet animation and a good radio form.

So there’s one more thing we need to do to make this form look like it was before, and that’s to make it all centered like it was before. And so to do that, we’ll go ahead and... I’ve already created a class called centered-form which does a lot of different flexbox stuff. And so we’ll just add that to our paper-content. And here we are.

So this has been one form’s rags to riches story, but I’m betting you have your own forms, I know I do, that are currently still in rags. So go forth, bring them the good news of Ember Paper, and watch them turn into a beautiful form like this. I’ll see you next week.

Material Design with ember-paper

Subscribe to our mailing list