Bagaimana cara menempatkan tab ion di bagian bawah layar?

97

Saya membuat tab ionik sederhana yang menampilkan ikon saya di bagian atas layar. Saya mencoba membungkusnya dengan ionic-footer-bar agar ditempatkan di bagian bawah layar tanpa hasil. Tab menghilang saat saya melakukannya. Bagaimana saya harus mendapatkan penampilan yang saya inginkan?

<ion-footer-bar>
    <ion-tabs class="tabs-icon-only tabs-stable">
    ...
    </ion-tabs>
</ion-footer-bar>
Italo Maia
sumber

Jawaban:

175

Sejak beta 14 dari Ionic ( http://blog.ionic.io/the-final-beta/ ), ada beberapa variabel config yang sekarang default ke nilai platform mereka, yang berarti bahwa mereka akan mencoba berperilaku sesuai dengan platform yang mereka bangun. Dalam kasus tab, untuk iOS defaultnya adalah ditampilkan di bawah, dan Android di atas.

Anda dapat dengan mudah "mengatur" lokasi untuk semua platform dengan mengatur tabs.positionfungsi di $ionicConfigProvider, di dalam fungsi konfigurasi Anda seperti ini:

MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom'); // other values: top

}]);

Anda dapat memeriksa dokumentasi di sini

jrl53
sumber
1
tidak, itu tidak berhasil. Pada tab browser di bagian bawah, di Android - di atas
Toolkit
3
Tab Android @Toolkit seharusnya dirender di atas secara default menurut dokumen Ionic. Panduan Android harus menghindari penggunaan bilah bawah karena tindakan default OS terletak di bagian bawah: developer.android.com/design/patterns/pure-android.html
Daniel Rochetti
@Toolkit Saya sudah mengedit jawabannya untuk memperbaiki informasi default platform. Jika Anda ingin menyesuaikannya, kode di atas adalah cara yang tepat. Namun saya menyarankan Anda untuk menghindari mengubah default platform, mereka cenderung mengikuti pedoman platform. =)
Daniel Rochetti
Adakah cara, menggunakan metode ini atau yang lain, untuk memiliki tab bawah dan atas? Saya mencoba membuat status lain untuk footer saya tetapi, untuk beberapa alasan, itu tidak ditampilkan ke layar meskipun saya melihatnya di tab jaringan di browser saya. Ada pemikiran tentang ini? Terima kasih
Bill Pope
65

Untuk menempatkan tab ionicFramework di bagian bawah layar untuk perangkat android cukup buka file app.js Anda , dan di bawah angular.module tambahkan baris kode berikut:

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Semoga ini bisa membantu.

Ahmed Na.
sumber
Bagaimana cara mencapai tab di bagian atas dan bawah layar?
Syed Danish Ali
Saya pikir Anda dapat membuat template terpisah untuk tab di bagian bawah dan atas
Ahmed Na.
Oh ya. Saya mengerti. Saya seorang pemula di dunia ionik ini.
Syed Danish Ali
Ini harus ditandai sebagai jawaban. Sederhana dan langsung ke intinya, Anda mendapat suara
positif
Sementara mengatur tab android ke bawah itu bekerja dengan baik sesuai kode Anda, Tapi saat menekan keyboard, tab juga muncul dengan tab. Apakah ada opsi untuk mengaturnya stabil di bagian bawah sambil menekan keyboard.
Suthan M
9

Pembaruan untuk Ionic 2 (sintaks yang lebih bersih / ditingkatkan):

Di app.js:

@App({
  ...
  config: {
    tabbarPlacement: 'bottom',
  }
})

Lihat Konfigurasi

Greg Blass
sumber
7

Menempatkannya di app.js Anda berhasil.

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Ionic secara otomatis mempertimbangkan konfigurasi platform untuk menyesuaikan hal-hal seperti gaya transisi yang akan digunakan dan apakah ikon tab harus ditampilkan di atas atau bawah.

Misalnya, dalam kasus tab, untuk iOS defaultnya adalah ditampilkan di bawah, dan Android di atas.

Note1 : Perlu dicatat bahwa ketika platform bukan iOS atau Android, maka itu akan default ke iOS

Note2 : jika Anda mengembangkan di browser desktop, ini akan menggunakan konfigurasi default iOS

Raj Kumar
sumber
5

Di samping file app.js, Anda perlu memasukkan $ ionicConfigProvider ke modul .config dan menambahkan $ ionicConfigProvider.tabs.position ('bottom')

.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');

});
Sandip Moradiya
sumber
3

Cara menempatkan tab ion di bagian bawah layar di Ionic 2

Untuk versi saat ini ionic 2.0.0-beta.10.

Dalam app.ts:

ionicBootstrap(MyApp, [], {
  tabbarPlacement: "bottom"
});

Lihat Config

Untuk segera dirilis ionic 2.0.0-beta.11

Dalam app.ts:

ionicBootstrap(MyApp, [], {
  tabsPlacement: "bottom" 
});

Config

MasterProgrammer200
sumber
2

Pembaruan untuk Ionic 2, dan Ionic 3+:

Anda memiliki 2 metode untuk mengubah posisi bilah tab:

Metode 1: Gunakan tabsPlacementpropertive of<ion-tabs>

<ion-tabs  tabsPlacement='bottom' >
    <ion-tab [root]="rootTab" tabTitle="Home"></ion-tab> 
</ion-tabs>

Metode 2: Ubah konfigurasi app.module.ts

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp, {
      tabsPlacement : 'bottom'
    })
  ]
})

Lihat dokumennya

Duannx
sumber
Apakah ada sesuatu yang mirip untuk komponen Segmen? Saya dapat meletakkannya di bagian bawah dengan CSS, jangan khawatir, tetapi dengan menempatkan batas pada tombol di atas maka semacam memiliki begitu banyak loop untuk dilewati dan terasa agak hacky, jadi saya bertanya-tanya apakah ada solusi yang lebih mudah, tetapi tidak menemukan apa pun di dokumen. Sebenarnya, dokumen Segmen agak pendek .... ionicframework.com/docs/api/components/segment/Segment
yogibimbi
Answer to self: ion-segment-button.segment-button { border-top-style: solid; border-bottom-width: 0; }melakukan triknya, namun, untuk border-top-width saya tidak menemukan jalan lain selain mengaturnya secara eksplisit dalam style-atribut pada elemen ke 2px. Sesuatu yang lain selalu menimpanya dengan 3px, bahkan mengaturnya di Chrome pada elemen dan dengan! Important dalam style sheet sepertinya tidak melebihi itu.
yogibimbi
1
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
Nasouh Almrstani
sumber
Harap, hindari jawaban hanya kode dan jelaskan solusi Anda.
Micho