Material 主題按鈕

上一頁
下一頁

描述

Material 主題提供了許多可在應用程式中使用的按鈕，方法是使用相應的類。下表列出了 Framework7 中使用的 Material 主題按鈕：

序號 型別和描述
1

普通/扁平按鈕

要使用扁平按鈕，請將 button 類應用於您的輸入按鈕。
2

按鈕行

要使用此功能，請使用帶有 buttons-row 類的元素包裝按鈕。
3

凸起按鈕

新增 button-raised 類以獲得凸起按鈕樣式的按鈕。
4

填充凸起按鈕

您可以將 button-fill 類新增到您的輸入按鈕。
5

彩色按鈕

您可以使用 20 種預設的 Material 顏色主題為按鈕著色。
6

填充彩色按鈕

您可以透過應用 button-fill 和顏色類來使用填充彩色按鈕。
7

填充彩色凸起按鈕

您可以透過應用 button-raised、button-fill 和顏色類來使用填充彩色凸起按鈕。
8

彩色波紋按鈕

可以使用 ripple-[color] 類為按鈕新增不同的彩色波紋效果。
9

大按鈕

可以透過新增 button-big 類將按鈕製作成大按鈕。
10

列表塊按鈕

可以使用按鈕與 列表檢視。

示例

以下示例顯示了不同型別的按鈕，例如彩色按鈕、扁平按鈕、填充彩色按鈕、大按鈕等，方法是在 Framework7 中使用 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>

輸出

讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：

  • 將上面給出的 HTML 程式碼儲存為 buttons_material.html 檔案，放在伺服器根資料夾中。

  • 以 https:///buttons_material.html 的方式開啟此 HTML 檔案，輸出將如下所示。

  • 此示例提供了不同型別的 Material 主題按鈕，例如扁平按鈕、大按鈕、行按鈕、彩色按鈕、填充彩色按鈕等。

framework7_buttons.htm
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.