मैंने एक साधारण आयनिक-टैब बनाया जो स्क्रीन के शीर्ष पर मेरे आइकन दिखाता है। मैंने इसे एक आयनिक-पाद-पट्टी में लपेटने की कोशिश की, ताकि इसे स्क्रीन के निचले भाग में रखा जा सके। जब मैं ऐसा करता हूं तो टैब गायब हो जाते हैं। मुझे जो लुक चाहिए वह मुझे कैसे पूरा करना चाहिए?
<ion-footer-bar>
<ion-tabs class="tabs-icon-only tabs-stable">
...
</ion-tabs>
</ion-footer-bar>
जवाबों:
Ionic ( http://blog.ionic.io/the-final-beta/ ) के बीटा 14 के बाद से , कुछ कॉन्फ़िगर चर हैं जो अब उनके मंच मूल्यों के लिए डिफ़ॉल्ट हैं, जिसका अर्थ है कि वे मंच के अनुसार व्यवहार करने की कोशिश करेंगे कि वे पर बने हैं। टैब के मामले में, iOS के लिए डिफॉल्ट बॉटम पर प्रदर्शित होना है, और एंड्रॉइड शीर्ष पर है।
आप इस तरह से अपने विन्यास समारोह के अंदर, tabs.positionसमारोह में स्थापित करके सभी प्लेटफार्मों के लिए स्थान "हार्ड सेट" कर सकते हैं $ionicConfigProvider:
MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
एंड्रॉइड डिवाइसों के लिए स्क्रीन के निचले भाग में आयनिकफ्रेमवर्क टैब को रखने के लिए बस अपनी ऐप खोलें। जेएस फाइल, और कोणीय.मॉडल के तहत कोड की निम्नलिखित पंक्तियां जोड़ें:
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
आशा है कि यह मदद करेगा।
Ionic 2 के लिए अद्यतन (क्लीनर / बेहतर सिंटैक्स):
App.js में:
@App({
...
config: {
tabbarPlacement: 'bottom',
}
})
अपने app.js में रखने से यह काम करता है।
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
आयोनिक स्वचालित रूप से प्लेटफ़ॉर्म कॉन्फ़िगरेशन को ध्यान में रखता है कि चीजों को समायोजित करने के लिए क्या संक्रमण शैली का उपयोग करना है और क्या टैब आइकन को ऊपर या नीचे दिखाना चाहिए।
उदाहरण के लिए, टैब के मामले में, iOS के लिए डिफ़ॉल्ट नीचे की तरफ प्रदर्शित होता है, और Android शीर्ष पर।
Note1 : ऐसा लगता है कि जब एक मंच iOS या Android नहीं है, तो यह आईओएस के लिए डिफ़ॉल्ट जाएगा
नोट 2 : यदि आप एक डेस्कटॉप ब्राउज़र पर विकसित कर रहे हैं, तो यह iOS डिफ़ॉल्ट कॉन्फिग पर लेने वाला है
ऐप में .js फ़ाइल के लिए आपको .config मॉड्यूल में $ ionicConfigProvider को इंजेक्ट करना होगा और $ ionicConfigProvider.tabs.position ('निचला') जोड़ना होगा।
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); //top
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.
.
.
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
वर्तमान संस्करण आयनिक 2.0.0-beta.10 के लिए।
App.ts में:
ionicBootstrap(MyApp, [], {
tabbarPlacement: "bottom"
});
विन्यास देखें
जल्द ही रिलीज होने के लिए आयनिक 2.0.0-beta.11
App.ts में:
ionicBootstrap(MyApp, [], {
tabsPlacement: "bottom"
});
टैब बार स्थिति बदलने के लिए आपके पास 2 तरीके हैं:
विधि 1: tabsPlacementउचित का उपयोग करें<ion-tabs>
<ion-tabs tabsPlacement='bottom' >
<ion-tab [root]="rootTab" tabTitle="Home"></ion-tab>
</ion-tabs>
विधि 2: में कॉन्फ़िगर बदलें app.module.ts
@NgModule({
imports: [
IonicModule.forRoot(MyApp, {
tabsPlacement : 'bottom'
})
]
})
डॉक्स देखें
ion-segment-button.segment-button { border-top-style: solid; border-bottom-width: 0; }क्या चाल, हालांकि, सीमा-शीर्ष-चौड़ाई के लिए मुझे 2px तत्व के लिए शैली-विशेषता में स्पष्ट रूप से इसे सेट करने के अलावा कोई अन्य सहारा नहीं मिला। कुछ और हमेशा इसे 3px के साथ अधिलेखित कर देता है, यहां तक कि इसे क्रोम में तत्व पर सेट करना और इसके साथ स्टाइल शीट में महत्वपूर्ण यह शीर्ष नहीं लगता है।
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);