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,…
Author
Released
5/5/2015- 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
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 8s
-
Using the exercise files2m 27s
-
-
1. Getting Started
-
2. Using Ionic CSS Components
-
Using Ionic buttons5m 14s
-
Adding Ionicons to a layout8m 42s
-
Working with tabs10m 3s
-
Using the list styles12m 30s
-
Using other form types7m 35s
-
Using special form elements5m 16s
-
3. Building a Single-View App
-
Using Angular controllers8m 26s
-
Filtering our searches5m 43s
-
Deleting list items4m 14s
-
Sliding to add favorites8m 15s
-
Implementing pull-to-refresh3m 14s
-
4. Creating a Multi-Tab Application
-
Implementing our first route10m 23s
-
Adding a second page7m 3s
-
Creating a sub-page10m 16s
-
Creating a global header5m 34s
-
Creating a calendar view8m 42s
-
Creating our main template7m 54s
-
Using multiple buttons3m 47s
-
Conclusion
- 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.
CancelTake 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.
Share this video
Embed this video
Video: Using Ionic buttons