iOS主题按钮（iOS Theme Buttons）
优质
小牛编辑
134浏览
2023-12-01
描述 (Description)
Framework7提供了许多iOS主题按钮，可以通过应用适当的类来使用。 下表显示了iOS主题按钮 -
| S.No | 类型和描述 |
|---|---|
| 1 | Usual Buttons 可以通过将button类用于任何链接或输入按钮来使用它。 |
| 2 | Active State 您可以通过向按钮添加active类来active按钮。 |
| 3 | Round Buttons button-round类用于添加圆形按钮。 |
| 4 | Big Buttons 您可以通过向输入按钮添加button-big大类来使用大按钮。 |
| 5 | Buttons Row/Segmented Control 要获得分段按钮行，请使用buttons-row类包装按钮。 每个按钮的宽度相等。 |
| 6 | Fill Buttons 它看起来与活动按钮相同，但打算用作单个按钮。 |
| 7 | Color Buttons 您可以使用10个默认颜色主题为按钮着色。 |
| 8 | List Block Buttons 可以使用带list views按钮。 |
| 9 | Using Grid 您也可以将按钮放在网格中。 |
例子 (Example)
以下示例演示了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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的buttons_iostheme.html文件。
以http://localhost/buttons_iostheme.html打开此HTML文件，输出显示如下。
该示例提供了不同类型的iOS主题按钮，如圆形按钮，大按钮，行按钮，颜色按钮等。