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:///buttons_iostheme.html`，將顯示如下輸出。

  • 此示例提供了不同型別的 iOS 主題按鈕，例如圓形按鈕、大按鈕、行按鈕、彩色按鈕等。

framework7_buttons.htm
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.