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>
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:
Semoga ini bisa membantu.
sumber
Pembaruan untuk Ionic 2 (sintaks yang lebih bersih / ditingkatkan):
Di app.js:
Lihat Konfigurasi
sumber
Menempatkannya di app.js Anda berhasil.
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
sumber
Di samping file app.js, Anda perlu memasukkan $ ionicConfigProvider ke modul .config dan menambahkan $ ionicConfigProvider.tabs.position ('bottom')
sumber
Cara menempatkan tab ion di bagian bawah layar di Ionic 2
Untuk versi saat ini ionic 2.0.0-beta.10.
Dalam app.ts:
Lihat Config
Untuk segera dirilis ionic 2.0.0-beta.11
Dalam app.ts:
Config
sumber
Pembaruan untuk Ionic 2, dan Ionic 3+:
Anda memiliki 2 metode untuk mengubah posisi bilah tab:
Metode 1: Gunakan
tabsPlacement
propertive of<ion-tabs>
Metode 2: Ubah konfigurasi
app.module.ts
Lihat dokumennya
sumber
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.sumber