Ionic Basics Tutorial
Ionic CSS Components
Ionic Javascript Components
Ionic Advanced Concepts
Ionic Useful Resources
Selected Reading
Ionic CSS Components
- Ionic - Padding
- Ionic - Icons
- Ionic - Grid
- Ionic - Tabs
- Ionic - Select
- Ionic - Range
- Ionic - Radio Button
- Ionic - Checkbox
- Ionic - Toggle
- Ionic - Forms
- Ionic - Cards
- Ionic - Lists
- Ionic - Buttons
- Ionic - Footer
- Ionic - Header
- Ionic - Content
- Ionic - Colors
Ionic Javascript Components
- Ionic - JS Tabs
- Ionic - JS Slide Box
- Ionic - JS Side Menu
- Ionic - JS Scroll
- Ionic - JS Popup
- Ionic - JS Popover
- Ionic - JS Navigation
- Ionic - JS Modal
- Ionic - JS Loading
- Ionic - JS List
- Ionic - JS Keyboard
- Ionic - JS Footer
- Ionic - JS Header
- Ionic - JS Events
- Ionic - JS Forms
- Ionic - JS Content
- Ionic - JS Backdrop
- Ionic - JS Action Sheet
Ionic Advanced Concepts
- Ionic - Splash Screen
- Ionic - Media
- Ionic - Geolocation
- Ionic - Native Audio
- Ionic - In App Browser
- Ionic - Facebook
- Ionic - Camera
- Ionic - AdMob
- Ionic - Cordova Integration
Ionic Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Ionic - Content
Ionic - Content
Almost every mobile app contains some fundamental elements. Usually those elements include a header and a footer that will cover the top and the bottom part of the screen. All the other elements will be placed between these two. Ionic provides ion-content element that serves as a container that will wrap all the other elements that we want to create.
This container has some unique characteristics, but since this is a JavaScript based component which we will cover in the later part of this
.<span class = "bar bar-header"> <h1 class = "title">Header</h1> </span> <span class = "pst"> <label class = "item item-input"> <input type = "text" placeholder = "Placeholder 1" /> </label> <label class = "item item-input"> <input type = "text" placeholder = "Placeholder 2" /> </label> </span> <span class = "bar bar-footer"> <h1 class = "title">Footer</h1> </span>Advertisements