Framework7-buttons-material
提供：Dev Guides
マテリアルテーマボタン
説明
マテリアルテーマには、適切なクラスを使用して、アプリケーションで使用する多くのボタンが用意されています。 次の表は、Framework7で使用されるマテリアルテーマボタンを示しています-
| S.No | Types & Description |
|---|---|
| 1 |
Usual/Flat Buttons フラットボタンを使用するには、_button_クラスを入力ボタンに使用します。 |
| 2 |
Buttons Row これを使用するには、ボタンをクラス_buttons-row_の要素でラップします。 |
| 3 |
Raised Buttons _button-raised_クラスを追加して、隆起したボタンスタイルのボタンを取得します。 |
| 4 |
Raised Fill Buttons _button-fill_クラスを入力ボタンに追加できます。 |
| 5 |
Color Buttons 20のデフォルトのマテリアルカラーテーマを使用して、ボタンに色を付けることができます。 |
| 6 |
Color Fill Buttons _button-fill_および色クラスを適用することにより、色塗りボタンを使用できます。 |
| 7 |
Color Raised Fill Buttons button-raised _、 button-fill_、およびcolorクラスを適用することにより、色上げ塗りつぶしボタンを使用できます。 |
| 8 |
Color Ripple Buttons _ripple- [color] _クラスを使用して、異なる色の波紋効果をボタンに追加できます。 |
| 9 |
Big Buttons _button-big_クラスを追加することで、ボタンを大きなボタンとして作成できます。 |
| 10 |
List Block Buttons _list views_でボタンを使用することが可能です。 |
例
次の例では、カラーボタン、フラットボタン、カラーフィルボタン、ビッグボタンなど、さまざまなタイプのボタンを表示します。 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.material.min.css"/>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.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 = "center">Buttons</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Usual/Flat Buttons</div>
<div class = "content-block">
<p><a href = "#" class = "button">Button</a></p>
</div>
<div class = "content-block-title">Buttons Row</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button">Button</a>
<a href = "#" class = "button">Button</a>
</p>
</div>
<div class = "content-block-title">Raised Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button button-raised">Button</a>
<a href = "#" class = "button button-raised">Button</a>
<a href = "#" class = "button button-raised">Button</a>
<a href = "#" class = "button button-raised">Button</a>
</p>
</div>
<div class = "content-block-title">Raised Fill Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button button-fill button-raised">Button</a>
<a href = "#" class = "button button-fill button-raised">Button</a>
<a href = "#" class = "button button-fill button-raised">Button</a>
<a href = "#" class = "button button-fill button-raised">Button</a>
</p>
</div>
<div class = "content-block-title">Color Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button color-pink">Pink</a>
<a href = "#" class = "button color-indigo">Indigo</a>
<a href = "#" class = "button color-blue">Blue</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button color-cyan">Cyan</a>
<a href = "#" class = "button color-green">Green</a>
<a href = "#" class = "button color-purple">Purple</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button color-orange">Orange</a>
<a href = "#" class = "button color-teal">Teal</a>
<a href = "#" class = "button color-red">Red</a>
</p>
</div>
<div class = "content-block-title">Color Fill Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button button-fill color-pink">Pink</a>
<a href = "#" class = "button button-fill color-indigo">Indigo</a>
<a href = "#" class = "button button-fill color-blue">Blue</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-fill color-cyan">Cyan</a>
<a href = "#" class = "button button-fill color-green">Green</a>
<a href = "#" class = "button button-fill color-purple">Purple</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-fill color-orange">Orange</a>
<a href = "#" class = "button button-fill color-teal">Teal</a>
<a href = "#" class = "button button-fill color-red">Red</a>
</p>
</div>
<div class = "content-block-title">Color Raised Fill Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button button-fill button-raised color-pink">Pink</a>
<a href = "#" class = "button button-fill button-raised color-indigo">Indigo</a>
<a href = "#" class = "button button-fill button-raised color-blue">Blue</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-fill button-raised color-cyan">Cyan</a>
<a href = "#" class = "button button-fill button-raised color-green">Green</a>
<a href = "#" class = "button button-fill button-raised color-purple">Purple</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-fill button-raised color-orange">Orange</a>
<a href = "#" class = "button button-fill button-raised color-teal">Teal</a>
<a href = "#" class = "button button-fill button-raised color-red">Red</a>
</p>
</div>
<div class = "content-block-title">Color Ripple Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button ripple-blue">Button</a>
<a href = "#" class = "button color-cyan ripple-green">Button with green ripple</a>
<a href = "#" class = "button color-red ripple-gray">Button with gray ripple</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-raised button-fill color-yellow ripple-green">Button</a>
<a href = "#" class = "button button-raised button-fill color-purple ripple-teal">Button</a>
<a href = "#" class = "button button-raised button-fill color-pink ripple-orange">Button</a>
</p>
</div>
<div class = "content-block-title">Big Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button button-big color-pink">Button</a>
<a href = "#" class = "button button-big color-blue">Button</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-big button-fill button-raised color-green">Button</a>
<a href = "#" class = "button button-big button-fill button-raised color-gray">Button</a>
</p>
</div>
<div class = "content-block-title">List Block Buttons</div>
<div class = "card">
<div class = "list-block">
<ul>
<li><a href = "#" class = "list-button item-link">List Button 1</a></li>
<li><a href = "#" class = "list-button item-link">List Button 2</a></li>
<li><a href = "#" class = "list-button item-link">List Button 3</a></li>
<li><a href = "#" class = "list-button item-link">List Button 4</a></li>
</ul>
</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({
material: true
});
</script>
</body>
</html>出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを buttons_materiall ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/buttons_materiallとして開くと、出力は以下のように表示されます。
- この例では、フラットボタン、大きなボタン、行ボタン、カラーボタン、カラーフィルボタンなど、さまざまな種類のマテリアルテーマボタンを提供します。
