Framework7-buttons-iostheme
提供：Dev Guides
iOSテーマボタン
説明
Framework7は、適切なクラスを適用することで使用できる多くのiOSテーマボタンを提供します。 次の表は、iOSテーマのボタンを示しています-
| S.No | Types & Description |
|---|---|
| 1 |
Usual Buttons _button_クラスを使用して、任意のリンクまたは入力ボタンに使用できます。 |
| 2 |
Active State クラス_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 ボタンをグリッドに配置することもできます。 |
例
次の例は、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_iosthemel ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/buttons_iosthemelとして開くと、出力は以下のように表示されます。
- この例では、丸いボタン、大きなボタン、行ボタン、色ボタンなど、さまざまな種類のiOSテーマボタンを提供します。
