Hello,
I’m new to the Ionic Framework. I’m having a hard time setting up a basic screen. I’d like to show you the screen and then the markup I’m using. Here is the screen:
+----------------------------------------------+
| Title |
+----------------------------------------------+
| |
| Scrollable tab content goes here |
| The entire tab area has a background |
| Image |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------------+
| Tab1 Tab2 Tab 3 |
+----------------------------------------------+
In an effort to do that, I’m using the following markup. In particular, I’m having problems making sense of page/view structure. I don’t understand when to use ion-content and when to use ion-scroll. I’m also having a hard time getting an image to show in the background of the selected tab. I’m also unable to get the tabs fixed against the bottom. Without further ado, here is my markup:
<div>
<ion-header-bar><h1 class="title">Title!</h1></ion-header-bar>
<ion-tabs class="tabs-positive tabs-icon-only" style="background-image:url('/images/background-1.jpg')">
<ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-scroll>
<ion-content>
<div>My home content goes here</div>
<ion-content>
<ion-scroll>
</ion-tab>
<ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
<ion-scroll>
<ion-content>
<div>My home content goes here</div>
<ion-content>
<ion-scroll>
</ion-tab>
</ion-tabs>
</div>
In summary, I’m having problems figuring out:
- How to fix the tabs to the bottom of the screen.
- How to add a background-image behind my tabs
- How to get scrolling to work.
I apologize if these are dumb questions. I keep reading the docs, which I understand are a work-in-progress. I just feel as though I’m missing something. Thank you for any and all help you can provide.