srcmini本文概述
Framework7提供了许多现成的按钮。你只需要在链接中添加适当的类或提交/按钮输入即可使用这些按钮。
iOS主题按钮
常用按钮
可以通过对任何链接或按钮输入使用按钮类来实现：
<p><a href="#"
class="button">Usual Button 1</a></p>
<p><a href="#"
class="button">Usual Button 2</a></p>
<p><a href="#"
class="button">Usual Button 3</a></p>注意：默认情况下, Framework7中的每个按钮均为“ display：block”, 并将采用其父宽度的100％。
活跃状态
只需向按钮添加其他活动类即可使你的按钮活动。
<a href="#" class="button active"> Active Button</a>圆形按钮
button-round类用于添加圆形按钮。
<p><a href="#"
class="button button-round">Round Button 1</a></p>
<p><a href="#"
class="button button-round">Round Button 2</a></p>
<p><a href="#"
class="button button-round active">Round Button Active</a></p>大按钮
你可以通过在输入按钮中添加button-big class来使用big按钮。
<a href="#"
class="button button-big">Big Button </a>
<a href="#"
class="button button-big button-round">Big Round Button </a>
<a href="#"
class="button button-big button-round active">Big Round Active Button </a>按钮行/分段控件
如果要获取分段的按钮行, 则必须使用buttons-row类包装按钮。每个按钮的宽度相等。
<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 active">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>
<p class="buttons-row">
<a href="#" class="button button-round">Button 1</a>
<a href="#" class="button button-round active">Button 2</a>
</p>填充按钮
填充按钮几乎与活动按钮相似, 但旨在用作单个按钮, 这对单击/轻击显示出不同的效果：
<a href="#" class="button button-fill">Fill Button </a>
<a href="#" class="button button-round button-fill">Round Fill Button</a>
<a href="#" class="button button-big button-fill">Big Fill Button </a>颜色按钮
你可以使用10个默认颜色主题来为按钮着色。
<p class="buttons-row theme-pink">
<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-orange">
<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-fill color-red button-round">Round Red</a></p>
<p><a href="#" class="button button-big button-fill color-gray">Big Gray</a></p>
<p><a href="#" class="button button-fill button-big color-yellow">Big Yellow</a></p>列表阻止按钮
你可以将按钮与列表视图一起使用。
<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>
</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>
</ul>
</div>使用网格
你可以根据需要将按钮放置在网格中的任何位置。
<div class="row">
<div class="col-50">
<a href="#" class="button button-big button-red">Cancel</a>
</div>
<div class="col-50">
<a href="#" class="button button-big button-green">Submit</a>
</div>
</div>iOS主题按钮示例
让我们以一个示例来演示iOS主题按钮：
<!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>立即测试
原生主题按钮
Material主题用于通过使用适当的类来提供许多在你的应用程序中使用的按钮。
以下是素材主题按钮的列表：
常用/扁平按钮
如果要使用平面按钮, 请对输入按钮使用按钮类。
<p><a href="#" class="button">Button</a></p>
<p><a href="#" class="button">Button</a></p>按钮行
要使用按钮行, 你必须使用按钮行类将按钮包装在一起。
<p class="buttons-row">
<a href="#"
class="button">Button</a>
<a href="#"
class="button">Button</a>
</p>凸起的按钮
使用“ button-raised”类获取凸起样式的按钮。
<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>
</p>凸起的填充按钮
对输入按钮使用按钮填充类。
<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>
</p>颜色按钮
你可以使用20个默认的“原生”颜色主题为按钮着色。
<p class="buttons-row">
<a href="#"
class="button color-red">Red</a>
<a href="#"
class="button color-green">Green</a>
<a href="#"
class="button color-blue">Blue</a>
</p>
<p class="buttons-row">
<a href="#"
class="button color-orange">Orange</a>
<a href="#"
class="button color-pink">Pink</a>
<a href="#"
class="button color-purple">Purple</a>
</p>
<p class="buttons-row">
<a href="#"
class="button color-cyan">Cyan</a>
<a href="#"
class="button color-teal">Teal</a>
<a href="#"
class="button color-indigo">Indigo</a>
</p>颜色填充按钮
你可以通过应用按钮填充和颜色类别来使用颜色填充按钮。
<p class="buttons-row">
<a href="#"
class="button button-fill color-red">Red</a>
<a href="#"
class="button button-fill color-green">Green</a>
<a href="#"
class="button button-fill color-blue">Blue</a>
</p>
<p class="buttons-row">
<a href="#"
class="button button-fill color-orange">Orange</a>
<a href="#"
class="button button-fill color-pink">Pink</a>
<a href="#"
class="button button-fill color-purple">Purple</a>
</p>
<p class="buttons-row">
<a href="#"
class="button button-fill color-cyan">Cyan</a>
<a href="#"
class="button button-fill color-teal">Teal</a>
<a href="#"
class="button button-fill color-indigo">Indigo</a>
</p>彩色填充按钮
你可以通过应用按钮凸起, 按钮填充和颜色类别来使用颜色凸起的填充按钮。
<p class="buttons-row">
<a href="#"
class="button button-raised button-fill color-red">Red</a>
<a href="#"
class="button button-raised button-fill color-green">Green</a>
<a href="#"
class="button button-raised button-fill color-blue">Blue</a>
</p>
<p class="buttons-row">
<a href="#"
class="button button-raised button-fill color-orange">Orange</a>
<a href="#"
class="button button-raised button-fill color-pink">Pink</a>
<a href="#"
class="button button-raised button-fill color-purple">Purple</a>
</p>
<p class="buttons-row">
<a href="#"
class="button button-raised button-fill color-cyan">Cyan</a>
<a href="#"
class="button button-raised button-fill color-teal">Teal</a>
<a href="#"
class="button button-raised button-fill color-indigo">Indigo</a>
</p>彩色波纹按钮
如果要添加不同颜色的波纹, 只需在按钮上添加ripple- [color]类。
<p class="buttons-row">
<a href="#"
class="button ripple-blue">Button</a>
<a href="#"
class="button color-green ripple-pink">Button</a>
<a href="#"
class="button color-teal ripple-amber">Button</a>
</p>
<p class="buttons-row">
<a href="#"
class="button button-raised button-fill color-orange ripple-green">Button</a>
<a href="#"
class="button button-raised button-fill color-pink ripple-blue">Button</a>
<a href="#"
class="button button-raised button-fill color-purple ripple-yellow">Button</a>
</p>大按钮
要使按钮变大, 请将button-big class添加到button。
<p class="buttons-row">
<a href="#"
class="button button-big color-green">Button</a>
<a href="#"
class="button button-big color-red">Button</a>
</p>
<p class="buttons-row">
<a href="#"
class="button button-big button-fill button-raised color-pink">Button</a>
<a href="#"
class="button button-big button-fill button-raised color-teal">Button</a>
</p>列表阻止按钮
你也可以将按钮与列表视图一起使用。
<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 2</a>
</li>
</ul>
</div>
</div>原生主题按钮示例
让我们以一个示例来演示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>立即测试
评论前必须登录！
注册