ionic ist eine leichte mobile UI-Bibliothek mit den Eigenschaften hoher Geschwindigkeit, moderner Benutzeroberfläche und schönem Erscheinungsbild. Um das Problem zu lösen, dass einige andere UI-Bibliotheken auf Mobiltelefonen langsam laufen, wurde die Unterstützung für Versionen unter IOS6 und Android4.1 direkt aufgegeben, um eine bessere Benutzererfahrung zu erzielen.

ionische Formen und Eingabefelder Syntax

Die Listenklasse kann auch für Eingabeelemente verwendet werden. Die Klassen item-input und item geben Textfelder und ihre Beschriftungen an.

ionische Formen und Eingabefelder Beispiel

<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">
      <div class="list">
        <label class="item item-input">
          <input type="text" placeholder="First Name">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Last Name">
        </label>
        <label class="item item-input">
          <textarea placeholder="Comments"></textarea>
        </label>
      </div>
      <div class="padding">
        <button class="button button-block button-positive">Submit</button>
      </div>
    </div>
  </body>
</html>

Instanz ausführen »

Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen