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://127.0.0.1/buttons_material.html 的方式打开此 HTML 文件，输出将如下所示。

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

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