Material Design with ember-paper-Awesome Forms
Published on May 25, 2016
Your forms deserve to be beautiful.
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
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
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
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.