Framework7 按钮

2025年3月17日 | 阅读 10 分钟

Framework7 提供了许多现成的按钮。您只需将相应的类添加到链接或提交/按钮输入中即可使用这些按钮。

iOS 主题按钮

常用按钮

可以通过将 button 类添加到任何链接或按钮输入来实现

<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% 的宽度。

活动状态

只需将其他 active 类添加到按钮即可使您的按钮处于活动状态。

圆形按钮

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 类添加到您的输入按钮来使用大按钮。

<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 主题按钮

Material 主题用于通过使用适当的类为您的应用程序提供许多按钮。

以下是 Material 主题按钮的列表

常用/扁平按钮

如果要使用扁平按钮，请将 button 类用于您的输入按钮。

<p><a href="#" class="button">Button</a></p>
<p><a href="#" class="button">Button</a></p>          

按钮行

要使用按钮行，您必须使用带有 buttons-row 类的元素包装按钮。

<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>          

凸起填充按钮

将 button-fill 类用于您的输入按钮。

<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 种默认 Material 颜色主题为您的按钮着色。

<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>

颜色填充按钮

您可以通过应用 button-fill 和颜色类来使用颜色填充按钮。

<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>

颜色凸起填充按钮

您可以通过应用 button-raised、button-fill 和颜色类来使用颜色凸起填充按钮。

<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 类添加到按钮。

<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 主题按钮示例

让我们举一个例子来演示 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>

立即测试

下一个主题Framework7 操作按钮

Framework7 按钮

iOS 主题按钮

常用按钮

注意：默认情况下，Framework7 中的每个按钮都具有“display:block”属性，并将占用其父元素 100% 的宽度。

活动状态

圆形按钮

大按钮

按钮行/分段控件

填充按钮

颜色按钮

列表块按钮

使用网格

iOS 主题按钮示例

Material 主题按钮

常用/扁平按钮

按钮行

凸起按钮

凸起填充按钮

颜色按钮

颜色填充按钮

颜色凸起填充按钮

颜色波纹按钮

大按钮

列表块按钮

Material 主题按钮示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Framework7 教程

Framework7 表单

Framework7 选项卡

F7 Swiper 滑块

F7 图片浏览器

F7 选择器

F7 日历

F7 杂项

面试题

Framework7 按钮

iOS 主题按钮

常用按钮

注意：默认情况下，Framework7 中的每个按钮都具有“display:block”属性，并将占用其父元素 100% 的宽度。

活动状态

圆形按钮

大按钮

按钮行/分段控件

填充按钮

颜色按钮

列表块按钮

使用网格

iOS 主题按钮示例

Material 主题按钮

常用/扁平按钮

按钮行

凸起按钮

凸起填充按钮

颜色按钮

颜色填充按钮

颜色凸起填充按钮

颜色波纹按钮

大按钮

列表块按钮

Material 主题按钮示例

相关帖子

F7 芯片

F7 进度条

F7 覆盖层

F7 手风琴

F7 工具栏

Framework7 安装

F7 内容块

F7 布局网格

F7 预加载器

F7 卡片

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器