mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
70 lines
2.1 KiB
HTML
70 lines
2.1 KiB
HTML
|
|
<ion-navbar *navbar hideBackButton 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">
|
|
<ion-icon name="moon"></ion-icon>
|
|
<span>23°</span>
|
|
</p>
|
|
|
|
<ion-tabs light class="advanced-weather-tabs" no-navbar tabbarPlacement="bottom">
|
|
<ion-tab light tabTitle="Sun" tabIcon="sunny"></ion-tab>
|
|
<ion-tab tabTitle="Mon" tabIcon="snow"></ion-tab>
|
|
<ion-tab tabTitle="Tue" tabIcon="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">
|
|
<ion-icon name="sunny"></ion-icon>
|
|
<span>78°</span>
|
|
</p>
|
|
|
|
<ion-tabs light class="advanced-weather-tabs" no-navbar tabbarPlacement="bottom">
|
|
<ion-tab light tabTitle="Tue" tabIcon="sunny"></ion-tab>
|
|
<ion-tab tabTitle="Wed" tabIcon="partly-sunny"></ion-tab>
|
|
<ion-tab tabTitle="Thr" tabIcon="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">
|
|
<ion-icon name="thunderstorm"></ion-icon>
|
|
<span>41°</span>
|
|
</p>
|
|
|
|
<ion-tabs light class="advanced-weather-tabs" no-navbar tabbarPlacement="bottom">
|
|
<ion-tab light tabTitle="Sun" tabIcon="thunderstorm"></ion-tab>
|
|
<ion-tab tabTitle="Mon" tabIcon="rainy"></ion-tab>
|
|
<ion-tab tabTitle="Tue" tabIcon="rainy"></ion-tab>
|
|
</ion-tabs>
|
|
</ion-card>
|
|
|
|
|
|
</ion-content>
|