離子選項卡欄上的響應圖像
[英]Responsive Image on ionic Tab bar
問題描述
我在項目中使用Ionic時遇到選項卡欄問題。我很想知道如何在離子選項卡欄而不是圖標上設置圖像，以便根據各種設備尺寸調整圖像大小。
2 個解決方案
解決方案1
0 2015-06-12 09:01:30
我的tabs.html看起來像這樣...很簡單
<ion-tabs class="tabs-icon-only tabs-color-active-positive">
<!-- Profile Tab -->
<ion-tab title="profile" icon-off="profile" icon-on="profile" href="#/tab/profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
<!-- offer Tab -->
<ion-tab title="offers" icon-off="offers" icon-on="offers" href="#/tab/offers">
<ion-nav-view name="tab-offers"></ion-nav-view>
</ion-tab>
<!-- inbox Tab -->
<ion-tab title="inbox" icon-off="inbox" icon-on="inbox" href="#/tab/inbox">
<ion-nav-view name="tab-inbox"></ion-nav-view>
</ion-tab>
<!-- share Tab -->
<ion-tab title="share" icon-off="share" icon-on="share" href="#/tab/share">
<ion-nav-view name="tab-share"></ion-nav-view>
</ion-tab>
<!-- settings Tab -->
<ion-tab title="settings" icon-off="settings" icon-on="settings" href="#/tab/settings">
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
和相關的CSS是
.tabs .tab-item .icon.profile {
background-repeat: no-repeat;
background-position:50%;
height: 100%;
background-image: url('../img/profile.png');
background-size:cover;
}
.tabs .tab-item .icon.offers {
background-repeat: no-repeat;
background-position: 50%;
height: 100%;
background-image: url('../img/offer.png');
background-size:cover;
}
.tabs .tab-item .icon.inbox {
background-repeat: no-repeat;
background-position: 50%;
height: 100%;
background-image: url('../img/inbox.png');
background-size:cover;
}
.tabs .tab-item .icon.share {
background-repeat: no-repeat;
background-position: 50%;
height: 100%;
background-image: url('../img/share.png');
background-size:cover;
}
.tabs .tab-item .icon.settings {
background-repeat: no-repeat;
background-position: 50%;
height: 100%;
background-image: url('../img/setting.png');
background-size:cover;
}
圖像的寬度為126像素，高度為107像素
解決方案2
0 2015-06-12 14:06:01
發現了問題，選項卡項的最大寬度設置為150px，如果您增加圖像應該能夠正確縮放，這是我的代碼，即使在非常大的寬度分辨率下我也可以正常工作，我還在每個寬度上都設置了寬度標簽項設置為100％：HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
</ion-content>
<ion-tabs class="tabs-icon-only tabs-color-active-positive">
<!-- Profile Tab -->
<ion-tab title="profile" icon-off="profile" icon-on="profile" href="#/tab/profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
<!-- offer Tab -->
<ion-tab title="offers" icon-off="offers" icon-on="offers" href="#/tab/offers">
<ion-nav-view name="tab-offers"></ion-nav-view>
</ion-tab>
<!-- inbox Tab -->
<ion-tab title="inbox" icon-off="inbox" icon-on="inbox" href="#/tab/inbox">
<ion-nav-view name="tab-inbox"></ion-nav-view>
</ion-tab>
<!-- share Tab -->
<ion-tab title="share" icon-off="share" icon-on="share" href="#/tab/share">
<ion-nav-view name="tab-share"></ion-nav-view>
</ion-tab>
<!-- settings Tab -->
<ion-tab title="settings" icon-off="settings" icon-on="settings" href="#/tab/settings">
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-pane>
</body>
</html>
CSS：
/* Styles here */
.tab-item{
max-width: 300px;
}
.tabs .tab-item .icon.profile {
background-repeat: no-repeat;
background-position:50%;
height: 100%;
width: 100%;
background-image: url('http://dreamatico.com/data_images/car/car-1.jpg');
background-size:cover;
}
.tabs .tab-item .icon.offers {
background-repeat: no-repeat;
background-position: 50%;
height: 100%;
width: 100%;
background-image: url('http://dreamatico.com/data_images/car/car-7.jpg');
background-size:cover;
}
.tabs .tab-item .icon.inbox {
background-repeat: no-repeat;
background-position: 50%;
height: 100%;
width: 100%;
background-image: url('http://dreamatico.com/data_images/car/car-2.jpg');
background-size:cover;
}
.tabs .tab-item .icon.share {
background-repeat: no-repeat;
background-position: 50%;
height: 100%;
width: 100%;
background-image: url('http://dreamatico.com/data_images/car/car-4.jpg');
background-size:cover;
}
.tabs .tab-item .icon.settings {
background-repeat: no-repeat;
background-position: 50%;
height: 100%;
width: 100%;
background-image: url('http://dreamatico.com/data_images/car/car-5.jpg');
background-size:cover;
}
如何根據所選頁面在離子框架的離子標題欄中給出響應標題？
[英]How to give responsive title in ion-header-bar in ionic framework based on selected page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.