Najlepszy samouczek lista jonowa W 2024 r. W tym samouczku możesz dowiedzieć się Z listy ikon,lista przyciski,Z listy Avatar,thumbnail,Lista wbudowania (lista wstawka),
Lista jest powszechnie stosowane elementy interfejsu, prawie zawsze używać we wszystkich aplikacji mobilnej.
Lista może być podstawowy tekst, przyciski, przełączniki i inne ikony miniatur.
Element listy może być dowolny element HTML. Elementy kontenerów wymaganych listę klasy, każdy element listy jest wymagana kategorię elementów.
ionList ionItem i łatwo obsługiwać szereg interaktywnych sposobów, takich jak edycja slajdów, przeciągnij rodzaj i usuwać elementy.
<ul class="list"> <li class="item"> pl. </li> </ul>
Możemy użyć klasy poz-dzielnik stworzyć listę separatora domyślnie listę elementów w innym kolorze tła i pogrubioną czcionką, aby odróżnić, ale można łatwo dostosować do niego.
<div class="list"> <div class="item item-divider"> Candy Bars </div> <a class="item" href="#"> Butterfinger </a> pl. </div>
Możemy określić ikonę po lewej lub po prawej stronie elementów listy.
Użyj poz-icon-lewy ikonę w lewo, poz-ikonę prawym ustawień ikonę po prawej stronie. Jeśli potrzebujesz obu stron ikonie, obie klasy są dodawane do.
Poniższe przykłady, użyliśmy <a> etykietę elementu listy, tak aby każdy klikalny element listy.
Element listy podczas korzystania <a> lub <button> elementem, jeśli prawo ikony nie zostanie dodany, zostanie on automatycznie dodany do strzałkami.
Przykład pierwszy element tylko ikony po lewej stronie, o Druga ikona ma, istnieje trzecia ikona po prawej stronie (a także zauważa, poz-note), czwarty ma odznakę (Mark) elementy.
<div class="list"> <a class="item item-icon-left" href="#"> <i class="icon ion-email"></i> Check mail </a> <a class="item item-icon-left item-icon-right" href="#"> <i class="icon ion-chatbubble-working"></i> Call Ma <i class="icon ion-ios-telephone-outline"></i> </a> <a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i> Record album <span class="item-note"> Grammy </span> </a> <a class="item item-icon-left" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> </div>
Użyj item-button-prawo lub przycisk poz-lewy przycisk na pozycji listy klasy.
<div class="list"> <div class="item item-button-right"> Call Ma <button class="button button-positive"> <i class="icon ion-ios-telephone"></i> </button> </div> pl. </div>
Użyj poz-avatar stworzyć awatara z listy:
<div class="list"> <a class="item item-avatar" href="#"> <img src="venkman.jpg"> <h2>Venkman</h2> <p>Back off, man. I'm a scientist.</p> </a> pl. </div>
Thumbnail poz-miniatur lewym klasy dodać lewa wyrównany, poz-miniatur prawym klasa służy do dodawania miniaturę po prawej wyrównania.
<div class="list"> <a class="item item-thumbnail-left" href="#"> <img src="cover.jpg"> <h2>Pretty Hate Machine</h2> <p>Nine Inch Nails</p> </a> pl. </div>
możemy być osadzony w pojemniku spośród liście, lista nie jest widoczny na całej szerokości.
Lista style inline jest: lista list-wstawka z ogólnej listy różnicą jest to, że ustawia margines (marign), podobną do tej zakładki.
Wykazy osadzone są żadne cienie, efekt będzie jeszcze lepszy podczas przewijania.
<div class="list list-inset"> <div class="item"> Raiders of the Lost Ark </div> pl. </div>