Ionic - stopka

Ionic footerznajduje się u dołu ekranu aplikacji. Praca ze stopkami jest prawie taka sama, jak praca z nagłówkami.

Dodawanie stopki

Główną klasą stopek jonowych jest bar(tak samo jak nagłówek). Jeśli chcesz dodać stopkę do ekranów, musisz dodaćbar-footer klasy do swojego elementu po main barklasa. Ponieważ chcemy używać naszej stopki na każdym ekranie w aplikacji, dodamy ją do plikubody z index.htmlplik. Dodamy również tytuł naszej stopki.

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

Powyższy kod wygeneruje następujący ekran -

Kolory stopki

Jeśli chcesz stylizować stopkę, wystarczy dodać do niej odpowiednią klasę kolorów. Kiedy stylizujesz swoje elementy, musisz dodać swoją główną klasę elementu jako przedrostek do swojej klasy koloru. Ponieważ stylizujemy pasek stopki, klasą prefiksu będziebar a klasa koloru, której chcemy użyć w tym przykładzie, to assertive (czerwony).

<div class = "bar bar-footer bar-assertive">
   <h1 class = "title">Footer</h1>
</div>

Powyższy kod wygeneruje następujący ekran -

Możesz użyć dowolnej z następujących dziewięciu klas, aby nadać stopce aplikacji wybrany kolor -

Klasa koloru Opis Wynik
bar-światło Do użycia w kolorze białym  
stabilny na pręcie Stosować przy jasnoszarym kolorze  
bar dodatni Do użycia w kolorze niebieskim  
spokój w barze Stosować przy jasnoniebieskim kolorze  
zrównoważony prętowo Do użycia w kolorze zielonym  
zasilany prętem Stosować do koloru żółtego  
asertywny Do użycia w kolorze czerwonym  
bar-royal Do stosowania w kolorze fioletowym  
bar-ciemny Do użycia w kolorze czarnym  

Elementy stopki

Stopki mogą zawierać elementy wewnątrz. W większości przypadków będziesz musiał dodawać przyciski z ikonami w stopce.

Pierwszy dodany przycisk zawsze będzie w lewym rogu. Ostatni zostanie umieszczony po prawej stronie. Przyciski między nimi zostaną zgrupowane obok pierwszego z lewej strony stopki. W poniższym przykładzie możesz również zauważyć, że używamy rozszerzeniaicon klasa, aby dodać ikony na górze przycisków.

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon"></button>
   <button class = "button icon ion-home"></button>
   <button class = "button icon ion-star"></button>
   <button class = "button icon ion-checkmark-round"></button>
</div>

Powyższy kod wygeneruje następujący ekran -

Jeśli chcesz przesunąć przycisk w prawo, możesz dodać pull-right klasa.

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon pull-right"></button>
</div>

Powyższy kod wygeneruje następujący ekran -