ionic ialah perpustakaan UI mudah alih yang ringan dengan ciri-ciri kelajuan pantas, antara muka moden dan penampilan yang cantik. Untuk menyelesaikan masalah beberapa perpustakaan UI lain yang berjalan perlahan pada telefon mudah alih, ia secara langsung melepaskan sokongan untuk versi di bawah IOS6 dan Android4.1 untuk mendapatkan pengalaman pengguna yang lebih baik.

senarai ionik 语法

Senarai ialah elemen antara muka yang digunakan secara meluas dan digunakan dalam hampir semua aplikasi mudah alih.

Senarai boleh berupa teks asas, butang, suis, ikon dan lakaran kecil, dsb.

Item senarai boleh menjadi sebarang elemen HTML. Elemen bekas memerlukan kelas senarai, dan setiap item senarai memerlukan kelas item.

ionList dan ionItem boleh menyokong pelbagai kaedah interaksi dengan mudah, seperti pengeditan gelongsor, pengisihan seret dan pemadaman item.

senarai ionik 示例

<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>

Run Instance »

Klik butang "Run Instance" untuk melihat instance dalam talian