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 -