Framework7 - iOS 主题按钮
说明
Framework7 提供了很多 iOS 主题按钮，可以通过应用适当的类来使用。下表列出了 iOS 主题按钮 −
| S.No | 类型 &描述 |
|---|---|
| 1 | 常用按钮 可以通过将 button 类应用于任何链接或输入按钮来使用它。 |
| 2 | 活动状态 您可以通过将 active 类添加到按钮来使按钮处于活动状态。 |
| 3 | 圆形按钮 button-round 类用于添加圆形按钮。 |
| 4 | 大按钮 您可以通过将 button-big 类添加到输入按钮来使用大按钮。 |
| 5 | 按钮行/分段控制 要获取分段按钮行，请使用 buttons-row 类包装按钮。每个按钮的宽度均等。 |
| 6 | 填充按钮 它看起来与活动按钮相同，但旨在用作单个按钮。 |
| 7 | 颜色按钮 您可以使用 10 种默认颜色主题为按钮着色。 |
| 8 | 列表块按钮 可以将按钮与列表视图一起使用。 |
| 9 | 使用网格 您也可以将按钮放在网格中。 |
示例
以下示例演示了如何在 Framework7 中使用按钮 −
<!DOCTYPE html>
<html class = "with-statusbar-overlay">
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>iOS Theme Buttons</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<link rel = "stylesheet"
href = "custom.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Buttons</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Usual Buttons</div>
<div class = "content-block">
<p> <a href = "#" class = "button">Usual Button</a></p>
</div>
<div class = "content-block-title">Active Button</div>
<div class = "content-block">
<p> <a href = "#" class = "button active">Active Button</a></p>
</div>
<div class = "content-block-title">Round Buttons</div>
<div class = "content-block">
<p> <a href = "#" class = "button button-round">Round Button</a></p>
<p> <a href = "#" class = "button button-round active">Round Button With Active</a></p>
</div>
<div class = "content-block-title">Big Buttons</div>
<div class = "content-block">
<p> <a href = "#" class = "button button-big">Big Button </a></p>
<p> <a href = "#" class = "button button-big button-round">Rounded Big Button </a></p>
<p> <a href = "#" class = "button button-big button-round active">Rounded Big Button and Active</a></p>
</div>
<div class = "content-block-title">Buttons Row / Segmented Controller</div>
<div class = "content-block">
<p class = "buttons-row"> <a href = "#" class = "button">Button 1</a><a href = "#" class = "button">Button 2</a><a href = "#" class = "button">Button 3</a></p>
<p class = "buttons-row"> <a href = "#" class = "button button-round">Button 1</a><a href = "#" class = "button button-round">Button 2</a></p>
</div>
<div class = "content-block-title">Fill buttons </div>
<div class = "content-block">
<p><a href = "#" class = "button button-fill">Fill Button</a></p>
<p><a href = "#" class = "button button-big button-fill">Big Fill Button </a></p>
</div>
<div class = "content-block-title">Color buttons</div>
<div class = "content-block">
<p class = "buttons-row theme-blue">
<a href = "#" class = "button active">Button 1</a><a href = "#" class = "button">Button 2</a><a href = "#" class = "button">Button 3</a>
</p>
<p class = "buttons-row theme-yellow">
<a href = "#" class = "button">Button 1</a><a href = "#" class = "button active">Button 2</a><a href = "#" class = "button">Button 3</a>
</p>
<p><a href = "#" class = "button button-fill color-green">Green</a></p>
<p><a href = "#" class = "button button-big button-fill color-pink">Big Pink</a></p>
<p><a href = "#" class = "button button-fill button-big color-gray">Big Gray Button</a></p>
</div>
<div class = "content-block-title">List block buttons</div>
<div class = "list-block">
<ul>
<li><a href = "#" class = "item-link list-button">List Button 1</a></li>
<li><a href = "#" class = "item-link list-button">List Button 2</a></li>
<li><a href = "#" class = "item-link list-button">List Button 3</a></li>
<li><a href = "#" class = "item-link list-button">List Button 4</a></li>
</ul>
</div>
<div class = "content-block-title">Inset list block buttons</div>
<div class = "list-block inset">
<ul>
<li><a href = "#" class = "item-link list-button">List Button 1</a></li>
<li><a href = "#" class = "item-link list-button">List Button 2</a></li>
<li><a href = "#" class = "item-link list-button">List Button 3</a></li>
<li><a href = "#" class = "item-link list-button">List Button 4</a></li>
</ul>
</div>
<div class = "content-block-title">Using Grid</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50"><a href = "#" class = "button button-big button-fill color-blue">Submit</a></div>
<div class = "col-50"><a href = "#" class = "button button-big button-fill color-red">Cancel</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>var myApp = new Framework7();</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 buttons_iostheme.html 文件。
以 http://localhost/buttons_iostheme.html 的形式打开此 HTML 文件，输出如下所示。
示例提供了不同类型的 iOS 主题按钮，例如圆形按钮、大按钮、行按钮、彩色按钮等。
framework7_buttons.html
