एनएवी-बार एंड्रॉइड के लिए डिफ़ॉल्ट आकार के साथ आता है और दूसरा आईओएस के लिए आता है क्योंकि प्लेटफार्म कैसे काम करते हैं। मुझे आवश्यक सौंदर्य उद्देश्यों के लिए एंड्रॉइड संस्करण में एनवी-var को बड़ा बनाना होगा। अब तक मैं केवल पाठ के आकार और सीएसएस के साथ रंग बदलने में सक्षम हूं लेकिन बार के आकार का नहीं।आयनिक के एनएवी-बार आकार को कैसे बदला जाए?
क्या इसे बदलना संभव है या डिजाइन द्वारा अस्थिर है?
निश्चित रूप से, आप आयनिक में किसी भी दृश्य पहलू को बदल सकते हैं। यहां CodePen से एक कार्य उदाहरण है।
तो, मैंने हेडर में कक्षा को जोड़ा और उपयुक्त स्टाइल जोड़ा। इसके अलावा, मैंने !important; सीएसएस नियम जोड़ा। कोड की नकल CodePen यहाँ से चिपकाया:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('page1', {
url: '/1',
templateUrl: 'page1.html'
})
.state('page2', {
url: '/2',
templateUrl: 'page2.html'
})
.state('page3', {
url: '/3',
templateUrl: 'page3.html',
controller : "Page3Ctrl"
})
$urlRouterProvider.otherwise("/1");
})
.controller('Page3Ctrl', function($scope) {
}).mynavbar{
height: 200px !important;
}<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive nav-title-slide-ios7 mynavbar" align-title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button">
LeftButton!
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button">
RightButton!
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
<script id="page1.html" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="Page 1" hide-back-button="true">
<ion-content class="padding">
<!-- The content of the page -->
<a class="button" ui-sref="page2">Go To Page 2</a>
</ion-content>
</ion-view>
</script>
<script id="page2.html" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="Page 2">
<ion-content class="padding">
<!-- The content of the page -->
<a class="button" ui-sref="page1">Go To Page 1</a>
<a class="button" ui-sref="page3">Go To Page 3</a>
</ion-content>
</ion-view>
</script>
<script id="page3.html" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="Page 3">
<ion-content class="padding">
<!-- The content of the page -->
<a class="button" ui-sref="page1">Go To Page 1</a>
<a class="button" ui-sref="page2">Go To Page 2</a>
</ion-content>
</ion-view>
</script>
</body>
</html>तुम बस आयनिक की डिफ़ॉल्ट शैली ओवरराइड करने के लिए किया है। आप अपने styles.css में निम्नलिखित लाइनों को जोड़कर इस लक्ष्य को हासिल कर सकते हैं:
.bar-header {
height: 70px; /*just an example*/
}
करने के लिए खड़ी अपने पृष्ठ के शीर्षक संरेखित भी इस जोड़ें: पृष्ठ की सामग्री को समायोजित करने के
.bar-header .title {
line-height: 70px;
}
और अंत में:
यह करने के लिए.has-header {
top: 70px;
}
यह अपनी सादगी के लिए स्वीकार्य उत्तर होना चाहिए और अच्छी तरह से समझाया जाना चाहिए। – Sebastian
सबसे अच्छा तरीका है सास (.scss .css के बजाय) का उपयोग करें और index.scss पर चर $bar-height के लिए डिफ़ॉल्ट मान ओवरराइड करने के लिए है।
$bar-height: 80px;
@import "../../bower_components/ionic/scss/ionic.scss";
/* Your css here */
हाय @ निकोला मैंने अभी आपका जवाब देखा और मैंने असफल प्रयास किया, क्या आप कृपया मेरे प्रश्न पर नज़र डालें? मैं इसकी सराहना करता हूं, धन्यवाद! http://stackoverflow.com/questions/35439595/different-header-on-web-and-ios-ionic –
@AlejandroLora क्या आपने नीचे वर्णित मेरे दृष्टिकोण की कोशिश की है? – QueryLars
@QueryLars हां, और यह काम नहीं करता है। मैंने कल शाम को तय किया, मार्जिन-टॉप का उपयोग करके शीर्ष संपत्ति को बढ़ाया। तो, मेरे पास शीर्ष था: 44 पीएक्स, मैं शीर्ष चाहता था: 66 पीएक्स, इसलिए मैं 22 पीएक्स के साथ मार्जिन टॉप जोड़ता हूं और यह आईपैड पर पूरी तरह से काम कर रहा है। धन्यवाद! –