iOS主题按钮

上一页
下一页

描述

Framework7 提供了许多 iOS 主题按钮，可以通过应用相应的类来使用它们。下表显示了 iOS 主题按钮：

序号 类型和描述
1

普通按钮

可以使用 `button` 类应用于任何链接或输入按钮。
2

活动状态

可以通过向按钮添加 `active` 类使其处于活动状态。
3

圆形按钮

使用 `button-round` 类创建圆形按钮。
4

大按钮

可以通过向输入按钮添加 `button-big` 类创建大按钮。
5

按钮行/分段控件

要获得分段按钮行，请使用 `buttons-row` 类包装按钮。每个按钮的宽度相等。
6

填充按钮

外观与活动按钮相同，但旨在用作单个按钮。
7

彩色按钮

可以使用 10 种默认颜色主题为按钮着色。
8

列表块按钮

可以在列表视图中使用按钮。
9

使用网格

也可以将按钮放置在网格中。

示例

以下示例演示了在 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.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>

输出

让我们执行以下步骤来查看上述代码是如何工作的：

  • 将上述 HTML 代码保存为 `buttons_iostheme.html` 文件到服务器根目录。

  • 在浏览器中打开此 HTML 文件，例如 `https://127.0.0.1/buttons_iostheme.html`，将显示如下输出。

  • 此示例提供了不同类型的 iOS 主题按钮，例如圆形按钮、大按钮、行按钮、彩色按钮等。

framework7_buttons.htm
打印页面
上一页
下一页
广告