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.

bouton ionique syntaxe

Les boutons font partie intégrante des applications mobiles. Différents styles d'applications nécessitent différents styles de boutons.

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

Exécuter l'instance »

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