Join Chris Griffith for an in-depth discussion in this video Adding buttons, part of Ratchet: Multidevice Prototyping.
Let's turn our attention to the button component. Although we have briefly touched on this component with the back button in our title bar, Ratchet provides a large collection of button styles that we can use in our application. I'm going to switch from working on the index page into one of the session details pages. These files can be found in your exercise folder for this chapter. After the session details text, let's add a few buttons that will enable the attendee to mark the session as a favorite in a button that will bring up the session survey page.
We have seen the button component used before in the header of an application, so this code should look a little familiar. Let's go ahead and add an anchor tag, set it to nothing, and let's go ahead and add the class of button, and then let's go ahead and give it a text of marked as favorite, and great! Let's go ahead and save that real quick, and go ahead and take a look at that in the browser. Now we see a mark as favorite button has been added beneath our session details text.
I think we can do better. The Ratchet framework has five button styles to work with. We've seen the base style. There's also a primary, positive, negative, and a link style that can be used. We can also mix in an additional style component of having the background button be filled or unfilled. Since Ratchet is a very compositional library, we can just have the CSS class of button-outline to any button to get that style, so back in our editor, back in that mark as favorite button, let's take it a little bit further.
Let's go ahead and add an icon. Adding icons for a button is a very straightforward process. For a button, let's add a star icon. Kind of makes sense for marking as a favorite. That's also the same icon we used in the tab component. It follows the same pattern, adding a span with the CSS classes of icon, and icon-star, and we'll add a little space, just to give it a little breathing room. Let's go ahead and save this. Go back over to our browser.
Let's go ahead and refresh this page, and now our icon star is right next to that mark as favorite. Little progress forward. I think we can still do better. Let's add another button to this page. The one for the survey, so again, anchor tag, we'll just set it to nowhere. Class again will be button. We're again going to have that span container serve as our placeholder for our icon. Actually, there's another great icon within the library, sort of a nice pencil box, or the edit link.
That'll work perfect here. That one is called icon-compost. Close up our span, and then give it our text label. That looks pretty good. File saved. Let's go ahead back over the browser. Take a quick look. Not bad, but you know, I think we can still do better. Although the buttons are of a decent size, I think they can be bigger. Be a little more mobile friendly, a little more touch friendly.
To do this, you know, we should make this full width, and this is actually really easy to do because there's a CSS class that Ratchet provides called button-block. This class will tell the button to be the full width of its parent container, so let's go to here, add button-block, and apply that to the other button as well. Save that. Let's go back to our browser. Do a quick refresh. A lot nicer.
Bigger, touchable. This will work. Now, we can go ahead and copy and paste this to each of the session files, so I'm going to go ahead and do that. Again, you'll find this either in the finish folder or the stark folder for the next video.
- Installing Ratchet
- Setting up a web server
- Creating your first screen
- Configuring meta tags
- Adding content
- Connecting pages with Push.js
- Adding icons, buttons, form elements, and lists
- Defining your app theme with Ratchet