At present, I use the ionic framework to develop my first App.
And I want to implement a style that one list item is on the top, and a tabs below the list item.
Please see the codepen.
Note: ignore the content of the js file in codepen. Focus on the html file.
My question is that , I could’t achieve my desired effect. My effect should like this:
In the top(red line), it has list item, and below the list, it should be a tabs(yellow line).
I use a list item, it contains “item-avatar-left”, background image and button.
<ion-content>
<div class="list">
<div class="item item-avatar-left" style="height: 150px;background-image: url('http://www.shrimpcolo.com/temp/bg_doctor_detail.jpg'); background-size: 100% 100%;">
<img style="margin-top: 3em" src="http://www.shrimpcolo.com/temp/Healer.jpg">
<button style="float: right;margin-top: 3em" class="button-rounded-yellow">Nice</button>
<h2 style="margin-top: 3em;color: white;">ShrimpColo <small style="font-size: smaller;color: white;">male</small> </h2>
<p style="font-size: 50%;color: white">Serviced 10 times</p>
</div>
</div>
... ...
</ion-content>
And I place an ionic tabs below the list item. like this:
... ...
<div class="tabs-striped tabs-color-royal" style="position: relative;">
<div class="tabs">
<a class="tab-item">All Project</a>
<a class="tab-item">Person Info</a>
</div>
</div>
<ion-list>
<ion-item>
<h2>Title1</h2>
</ion-item>
<ion-item>
<h2>Title2</h2>
</ion-item>
<ion-item>
<h2>Title3</h2>
</ion-item>
<ion-item>
<h2>Title4</h2>
</ion-item>
</ion-list>
Using the style="position: relative;
for location. And don’t using the tabs-top
, if I use it, there is a space between tabs and list item, and the shadow of tabs is up not down, that’s not what I my wanted.
Could the ionic support this complex layout? How should I to do?
Any idea is good. Thank you!