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中文網(wǎng)(php.cn)</title>
????????<link?>
????????<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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例