আমি একটি সাধারণ আয়নিক-ট্যাব তৈরি করেছি যা আমার আইকনগুলি স্ক্রিনের শীর্ষে দেখায়। কোনও সাফল্য না পেয়ে পর্দার নীচে রাখার জন্য আমি এটিটিকে আয়নিক-ফুটার-বারে মোড়ানোর চেষ্টা করেছি। আমি যখন এটি করি তখন ট্যাবগুলি অদৃশ্য হয়ে যায়। আমি যে চেহারা দেখতে চাই তা কীভাবে সম্পাদন করা উচিত?
<ion-footer-bar>
<ion-tabs class="tabs-icon-only tabs-stable">
...
</ion-tabs>
</ion-footer-bar>
উত্তর:
যেহেতু বিটা 14 আয়নের (এর http://blog.ionic.io/the-final-beta/ ), কিছু কনফিগ ভেরিয়েবল যে এখন তাদের প্ল্যাটফর্ম মান, যার মানে ডিফল্ট যে তারা প্ল্যাটফর্ম অনুযায়ী আচরণ করতে চেষ্টা করবে হয় যে তারা উপর নির্মিত হয়। ট্যাবগুলির ক্ষেত্রে, আইওএসের জন্য ডিফল্টটি নীচে প্রদর্শিত হয় এবং উপরে অ্যান্ড্রয়েড।
আপনি সহজে "কঠিন সেট" সেটিং দ্বারা সমস্ত প্ল্যাটফর্মের জন্য অবস্থান tabs.positionফাংশন $ionicConfigProvider, এই মত আপনার কনফিগ ফাংশন ভিতরে:
MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
আপনি এখানে ডকুমেন্টেশন চেক করতে পারেন
অ্যান্ড্রয়েড ডিভাইসগুলির জন্য পর্দার নীচে আয়নিক ফ্রেমওয়ার্ক ট্যাবগুলি স্থাপন করতে কেবল আপনার অ্যাপ.জেএস ফাইলটি খুলুন , এবং কৌণিক.মডিউলের নীচে নিম্নলিখিত কোডের লাইন যুক্ত করুন:
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
আশা করি এটি সাহায্য করবে।
আয়নিক 2 (ক্লিনার / উন্নত বাক্য গঠন) এর জন্য আপডেট করুন:
App.js এ:
@App({
...
config: {
tabbarPlacement: 'bottom',
}
})
এটি আপনার অ্যাপ্লিকেশন.জেজে রেখে দেওয়ার কাজ করে।
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
কোন ট্রানজিশন স্টাইলটি ব্যবহার করতে হবে এবং ট্যাব আইকনগুলি উপরে বা নীচে প্রদর্শিত হবে কিনা এই জাতীয় জিনিসগুলি সামঞ্জস্য করতে অয়ন স্বয়ংক্রিয়ভাবে প্ল্যাটফর্ম কনফিগারেশনগুলিকে অ্যাকাউন্টে নেয় takes
উদাহরণস্বরূপ, ট্যাবগুলির ক্ষেত্রে, আইওএসের জন্য ডিফল্টটি নীচে প্রদর্শিত হয় এবং শীর্ষে অ্যান্ড্রয়েড।
নোট 1 : এটি লক্ষ করা উচিত যে যখন কোনও প্ল্যাটফর্মটি আইওএস বা অ্যান্ড্রয়েড নয়, তখন এটি আইওএসে ডিফল্ট হবে
নোট 2 : আপনি যদি কোনও ডেস্কটপ ব্রাউজারে বিকাশ করে থাকেন তবে এটি আইওএস ডিফল্ট কনফিগারেশনগুলি গ্রহণ করবে
অ্যাপ্লিকেশন.জেএস ফাইলটির পাশের অংশে আপনাকে .config মডিউলে ionicConfigProvider ইনজেক্ট করতে হবে এবং $ ionicConfigProvider.tabs.p स्थिति যুক্ত করতে হবে ('নীচে')
.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।
অ্যাপ্লিকেশনগুলিতে:
ionicBootstrap(MyApp, [], {
tabbarPlacement: "bottom"
});
কনফিগারেশন দেখুন
শীঘ্রই প্রকাশিত হবে আয়নিক 2.0.0-beta.11
অ্যাপ্লিকেশনগুলিতে:
ionicBootstrap(MyApp, [], {
tabsPlacement: "bottom"
});
ট্যাব বারের অবস্থান পরিবর্তন করার জন্য আপনার কাছে দুটি পদ্ধতি রয়েছে:
পদ্ধতি 1: ব্যবহার করুন tabsPlacementএর propertive<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 দিয়ে ওভাররাইট করে, এমনকি এটি উপাদানটিতে Chrome এ সেট করে এবং স্টাইল শীটে গুরুত্বপূর্ণ এটি শীর্ষস্থানে উপস্থিত হয় না বলে মনে হয়।
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);