Ionic provides many classes to style and work with buttons, something you'll appreciate if you are familiar with Bootstrap or jQuery Mobile. Buttons are commonly used for mobile interfaces, and using Ionic buttons makes building your AngularJS mobile app fast and efficient. In this tutorial, you'll learn how quickly identify the right button for your application and put it into action.
- Buttons are a really common interface pattern,…especially on mobile devices.…Now if you've used something like jQuery Mobile…or Bootstrap, you'll notice that Ionic has…a lot of classes for styling…and working with buttons.…So let's take a look at some of these…in our application.…So I'm gonna start right over here…inside the ion-content.…To get a basic button,…you can use the button tag…and you would add a class here of button.…I'll just type in Hello right now,…save it, and you can see this sort…of basic button.…
Let me go ahead and put this text right here…in a paragraph…so we see the button on the next line.…Now these classes are also going…to work with anchor tags.…So you could do the same thing…by just instead of using button,…say we use the a tag here.…If we save it, notice that it looks…exactly the same.…This, of course, would have an href…somewhere in here.…Sometimes it makes a little bit more sense…to have a button, and sometimes it makes…a little bit more sense to have an anchor tag.…
In addition to the button class,…
- Installing the development environment on Mac or PC
- Understanding the Ionic templates and CSS components
- Adding IonicIcons to a layout
- Adding tabs, cards, and lists
- Using form elements
- Building a single view app
- Implementing Pull to Refresh
- Creating a multi-tab app
- Styling the applications
- Deploying applications
Skill Level Intermediate
1. Getting Started
2. Using Ionic CSS Components
3. Building a Single-View App
4. Creating a Multi-Tab Application
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.