Jak umieścić zakładki jonowe na dole ekranu?


97

Stworzyłem proste karty jonowe, które pokazują moje ikony u góry ekranu. Próbowałem zawinąć go w pasek stopki jonowej, aby bezskutecznie umieścić go na dole ekranu. Karty znikają, kiedy to robię. Jak mam uzyskać pożądany wygląd?

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

Odpowiedzi:


175

Od wersji beta 14 Ionic ( http://blog.ionic.io/the-final-beta/ ) istnieją pewne zmienne konfiguracyjne, które teraz domyślnie przyjmują wartości platformy, co oznacza, że ​​będą próbowały zachowywać się zgodnie z platformą na których są zbudowane. W przypadku kart, w przypadku iOS domyślnie wyświetlane jest na dole, a Android na górze.

Możesz łatwo „sztywno ustawić” lokalizację dla wszystkich platform, ustawiając tabs.positionfunkcję w $ionicConfigProvider, wewnątrz funkcji konfiguracyjnej, w następujący sposób:

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

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

}]);

Możesz sprawdzić dokumentację tutaj


1
nie, to nie działa. Na kartach przeglądarki na dole, na Androidzie - na górze
zestaw narzędzi

3
Zgodnie z dokumentacją Ionic, karty @Toolkit dla Androida powinny być domyślnie renderowane na wierzchu. Wytyczne dla Androida mają unikać używania dolnych pasków z powodu domyślnych działań systemu operacyjnego znajdujących się na dole: developer.android.com/design/patterns/pure-android.html
Daniel Rochetti,

@Toolkit Już zredagowałem odpowiedź, aby naprawić informacje o domyślnych ustawieniach platformy. Jeśli chcesz go dostosować, powyższy kod jest właściwą drogą do tego. Jednak sugerowałbym unikanie zmiany domyślnych ustawień platformy, zwykle postępują zgodnie z wytycznymi platformy. =)
Daniel Rochetti

Czy jest sposób, używając tej lub innej metody, aby mieć dolne i górne zakładki? Próbowałem utworzyć inny stan dla mojej stopki, ale z jakiegoś powodu nie wyświetla się on na ekranie, mimo że widzę go na karcie sieci w mojej przeglądarce. Jakieś przemyślenia na ten temat? Dzięki
Bill Pope

65

Aby umieścić zakładki ionicFramework u dołu ekranu dla urządzeń z systemem Android, po prostu otwórz plik app.js i pod angular.module dodaj następujące wiersze kodu:

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

Mam nadzieję, że to pomoże.


Jak uzyskać zakładki na górze i na dole ekranu?
Syed Danish Ali

Myślę, że możesz stworzyć osobny szablon dla zakładek na dole i na górze
Ahmed Na.

O tak. Rozumiem. Jestem nowicjuszem w świecie Jonika.
Syed Danish Ali

Powinno to być oznaczone jako odpowiedź. To proste i do
rzeczy, dostałeś mój pozytywny

Podczas gdy ustawisz kartę Androida na dole, działa dobrze zgodnie z twoim kodem, ale podczas naciskania klawiatury karta również pojawia się z kartą. Czy jest jakaś opcja, aby ustawić go stabilnie na dole podczas naciskania klawiatury.
Suthan M


7

Umieszczenie go w pliku app.js działa.

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

Ionic automatycznie bierze pod uwagę konfiguracje platformy, aby dostosować takie rzeczy, jak używany styl przejścia i czy ikony zakładek powinny być wyświetlane na górze, czy na dole.

Na przykład, w przypadku kart, w przypadku iOS domyślnym ustawieniem jest wyświetlanie na dole, a Androida na górze.

Uwaga 1 : Należy zauważyć, że jeśli platforma nie jest systemem iOS lub Android, domyślnie będzie to iOS

Uwaga 2 : jeśli tworzysz w przeglądarce na komputerze, zajmie to domyślne konfiguracje iOS


5

Po stronie pliku app.js musisz wstrzyknąć $ ionicConfigProvider do modułu .config i dodać $ 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');

});

3

Jak umieścić zakładki jonowe u dołu ekranu w Ionic 2

W obecnej wersji ionic 2.0.0-beta.10.

W aplikacjach:

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

Zobacz Config

Wkrótce ukaże się ionic 2.0.0-beta.11

W aplikacjach:

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

Config


2

Aktualizacja dla Ionic 2 i Ionic 3+:

Masz dwie metody zmiany pozycji paska kart:

Metoda 1: użyj tabsPlacementwłaściwości<ion-tabs>

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

Metoda 2: Zmień konfigurację w app.module.ts

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

Zobacz dokumentację


Czy jest coś zdalnie podobnego dla komponentu Segment? Mogę umieścić to na dole za pomocą CSS bez obaw, ale umieszczenie obramowania na przyciskach na górze ma tak wiele pętli do przeskoczenia i wydaje się raczej zepsute, więc zastanawiam się, czy było łatwiejsze rozwiązanie, ale nie znalazłem żadnego w dokumentach. Właściwie dokument Segment jest raczej krótki .... ionicframework.com/docs/api/components/segment/Segment
yogibimbi

Odpowiedź do siebie: ion-segment-button.segment-button { border-top-style: solid; border-bottom-width: 0; }załatwia sprawę, jednak w przypadku border-top-width nie znalazłem żadnego innego rozwiązania niż ustawienie go jawnie w atrybucie style elementu na 2px. Coś innego zawsze nadpisuje go na 3px, nawet ustawienie go w Chrome na elemencie i za pomocą! Ważne w arkuszu stylów nie wydaje się tego nadrzędne.
yogibimbi

1
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);

Prosimy o unikanie odpowiedzi zawierających tylko kod i wyjaśnianie rozwiązania.
Micho,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.