ionic is a lightweight mobile UI library with the characteristics of fast speed, modern interface and beautiful appearance. In order to solve the problem of some other UI libraries running slowly on mobile phones, it directly gave up support for versions below IOS6 and Android4.1 to obtain a better user experience.

ionic button syntax

Buttons are an integral part of mobile apps. Different styles of apps require different button styles.

ionic button example

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

运行实例 »

点击 "运行实例" 按钮查看在线实例