ionic est une bibliothèque d'interface utilisateur mobile légère présentant les caractéristiques d'une vitesse rapide, d'une interface moderne et d'une belle apparence. Afin de résoudre le problème de certaines autres bibliothèques d'interface utilisateur fonctionnant lentement sur les téléphones mobiles, il a directement abandonné la prise en charge des versions inférieures à IOS6 et Android4.1 pour obtenir une meilleure expérience utilisateur.

liste ionique syntaxe

La liste est un élément d'interface largement utilisé et est utilisé dans presque toutes les applications mobiles.

La liste peut être composée de texte de base, de boutons, de commutateurs, d'icônes et de vignettes, etc.

Les éléments de liste peuvent être n’importe quel élément HTML. L'élément conteneur nécessite la classe list et chaque élément de liste nécessite la classe item.

ionList et ionItem peuvent facilement prendre en charge diverses méthodes d'interaction, telles que l'édition coulissante, le tri par glisser-déposer et la suppression d'éléments.

liste ionique exemple

<html ng-app="ionicApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>PHP中文网(php.cn)</title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    </head>
    <body>
    
    <div class="bar bar-header">
      <div class="h1 title">列表</div>
    </div>
    
    <div class="content has-header">

      <ul class="list">

        <li class="item">
          Battletoads
        </li>
        <li class="item">
          Contra
        </li>
        <li class="item">
          Duck Tales
        </li>
        <li class="item">
          Mega Man
        </li>
        <li class="item">
          Metroid
        </li>
        <li class="item">
          Mike Tyson's Punch-Out
        </li>
        <li class="item">
          R.C. Pro-Am
        </li>
        <li class="item">
          Spy Hunter
        </li>
        <li class="item">
          Super Mario Bros.
        </li>
        <li class="item">
          The Legend of Zelda
        </li>

      </ul>

    </div>
    
  </body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne