材料主题按钮（Material Theme Buttons）
优质
小牛编辑
134浏览
2023-12-01
描述 (Description)
材质主题通过使用适当的类提供了许多要在应用程序中使用的按钮。 下表列出了Framework7中使用的材料主题按钮 -
| S.No | 类型和描述 |
|---|---|
| 1 | Usual/Flat Buttons 要使用平面按钮，请使用button类到输入按钮。 |
| 2 | Buttons Row 要使用它，请使用带有class 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和颜色类来使用颜色凸起的填充按钮。 |
| 8 | Color Ripple Buttons 通过使用ripple-[color]类，可以为按钮添加不同的颜色波纹效果。 |
| 9 | Big Buttons 通过添加button-big大类可以将按钮设为大按钮。 |
| 10 | List Block Buttons 可以使用带list views按钮。 |
例子 (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.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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的buttons_material.html文件。
以http://localhost/buttons_material.html打开此HTML文件，输出显示如下。
该示例提供了不同类型的材质主题按钮，例如平面按钮，大按钮，行按钮，颜色按钮，颜色填充按钮等。