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.

ionischer Knopf Syntax

Schaltflächen sind ein wesentlicher Bestandteil mobiler Apps. Unterschiedliche App-Stile erfordern unterschiedliche Schaltflächenstile.

ionischer Knopf 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">Buttons</div>
    </div>
    
    <div class="content has-header padding scroll scroll-content" style="overflow-y:auto">

      <p><button class="button button-light">button-light</button>
      </p><p><button class="button button-stable">button-stable</button>
      </p><p><button class="button button-positive">button-positive</button>
      </p><p><button class="button button-calm">button-calm</button>
      </p><p><button class="button button-balanced">button-balanced</button>
      </p><p><button class="button button-energized">button-energized</button>
      </p><p><button class="button button-assertive">button-assertive</button>
      </p><p><button class="button button-royal">button-royal</button>
      </p><p><button class="button button-dark">button-dark</button></p>

    </div>

  </body>
</html>

Instanz ausführen »

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