mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 22:17:40 +08:00
74 lines
2.0 KiB
HTML
74 lines
2.0 KiB
HTML
|
|
<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
|
|
<ion-title>Weather Card</ion-title>
|
|
</ion-navbar>
|
|
|
|
<ion-content class="has-header components-demo cards-bg preview-weather-cards">
|
|
|
|
<ion-card class="advanced-background">
|
|
<img src="img/advance-card-alaska.jpg"/>
|
|
|
|
<ion-item class="advanced-trans">
|
|
<p item-left>ALASKA, USA</p>
|
|
<p item-right>SUN</p>
|
|
</ion-item>
|
|
|
|
<p class="advanced-background-title advanced-background-title-large">
|
|
<icon moon></icon>
|
|
<span>23°</span>
|
|
</p>
|
|
|
|
<ion-tabs light class="advanced-weather-tabs" no-navbar tabbar-placement="bottom">
|
|
<ion-tab light tab-title="Sun" tab-icon="sunny"></ion-tab>
|
|
<ion-tab tab-title="Mon" tab-icon="snow"></ion-tab>
|
|
<ion-tab tab-title="Tue" tab-icon="cloudy"></ion-tab>
|
|
</ion-tabs>
|
|
</ion-card>
|
|
|
|
<ion-card class="advanced-background">
|
|
<img src="img/advance-card-machu-picchu-1.jpg"/>
|
|
|
|
<ion-item class="advanced-trans">
|
|
<p item-left>MACHU PICCHU, PERU</p>
|
|
<p item-right>TUE</p>
|
|
</ion-item>
|
|
|
|
<p class="advanced-background-title advanced-background-title-large">
|
|
<icon Sunny></icon>
|
|
<span>78°</span>
|
|
</p>
|
|
|
|
<ion-tabs light class="advanced-weather-tabs" no-navbar tabbar-placement="bottom">
|
|
<ion-tab light tab-title="Tue" tab-icon="sunny"></ion-tab>
|
|
<ion-tab tab-title="Wed" tab-icon="partly-sunny"></ion-tab>
|
|
<ion-tab tab-title="Thr" tab-icon="cloudy"></ion-tab>
|
|
</ion-tabs>
|
|
</ion-card>
|
|
|
|
<ion-card class="advanced-background">
|
|
<img src="img/advance-card-london.jpg"/>
|
|
|
|
<ion-item class="advanced-trans">
|
|
<p item-left>LONDON, UK</p>
|
|
<p item-right>SUN</p>
|
|
</ion-item>
|
|
|
|
<p class="advanced-background-title advanced-background-title-large">
|
|
<icon thunderstorm></icon>
|
|
<span>41°</span>
|
|
</p>
|
|
|
|
<ion-tabs light class="advanced-weather-tabs" no-navbar tabbar-placement="bottom">
|
|
<ion-tab light tab-title="Sun" tab-icon="thunderstorm"></ion-tab>
|
|
<ion-tab tab-title="Mon" tab-icon="rainy"></ion-tab>
|
|
<ion-tab tab-title="Tue" tab-icon="rainy"></ion-tab>
|
|
</ion-tabs>
|
|
</ion-card>
|
|
|
|
|
|
</ion-content>
|
|
|
|
|
|
|
|
|