Framework7 - Material 主题按钮
描述
Material 主题提供许多按钮，可通过使用适当的类在应用程序中使用。下表列出了 Framework7 中使用的 Material 主题按钮 −
| S.No | 类型 &描述 |
|---|---|
| 1 | 常用/平面按钮 要使用平面按钮，请在输入按钮上使用 button 类。 |
| 2 | 按钮行 要使用此功能，请使用类为 buttons-row 的元素包裹按钮。 |
| 3 | 凸起按钮 添加 button-raised 类以获取凸起按钮样式的按钮。 |
| 4 | 凸起填充按钮 您可以将 button-fill 类添加到输入按钮。 |
| 5 | 彩色按钮 您可以使用 20 种默认材料颜色主题为按钮着色。 |
| 6 | 彩色填充按钮 您可以通过应用 button-fill 和颜色类来使用彩色填充按钮。 |
| 7 | 彩色凸起填充按钮 您可以通过应用 button-raised、button-fill 和 color 类来使用彩色凸起填充按钮。 |
| 8 | 彩色波纹按钮 通过使用 ripple-[color] 类，可以向按钮添加不同的彩色波纹效果。 |
| 9 | 大按钮 可以通过添加 button-big 类将按钮设为大按钮。 |
| 10 | 列表块按钮 可以将按钮与列表视图一起使用。 |
示例
以下示例使用 Framework7 中的 Material 主题按钮显示不同类型的按钮，例如彩色按钮、扁平按钮、颜色填充按钮、大按钮等 −
<!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_material.html 文件。
以 http://localhost/buttons_material.html 的形式打开此 HTML 文件，输出如下所示。
该示例提供了不同类型的材料主题按钮，例如平面按钮、大按钮、行按钮、彩色按钮、颜色填充按钮等。
framework7_buttons.html
