材料主题按钮(Material Theme Buttons)

优质
小牛编辑
133浏览
2023-12-01

描述 (Description)

材质主题通过使用适当的类提供了许多要在应用程序中使用的按钮。 下表列出了Framework7中使用的材料主题按钮 -

S.No类型和描述
1

Usual/Flat Buttons

要使用平面按钮,请使用button类到输入按钮。

2

Buttons Row

要使用它,请使用带有class buttons-row元素包装按钮。

3

Raised Buttons

添加button-raised类以获取凸起的按钮样式按钮。

4

Raised Fill Buttons

您可以将button-fill类添加到输入按钮。

5

Color Buttons

您可以使用20种默认材质颜色主题为按钮着色。

6

Color Fill Buttons

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

7

Color Raised Fill Buttons

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

8

Color Ripple Buttons

通过使用ripple-[color]类,可以为按钮添加不同的颜色波纹效果。

9

Big Buttons

通过添加button-big大类可以将按钮设为大按钮。

10

List Block Buttons

可以使用带list views按钮。

例子 (Example)

以下示例使用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.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>

输出 (Output)

让我们执行以下步骤,看看上面给出的代码是如何工作的 -

  • 将上面给出的HTML代码保存为服务器根文件夹中的buttons_material.html文件。

  • 以http://localhost/buttons_material.html打开此HTML文件,输出显示如下。

  • 该示例提供了不同类型的材质主题按钮,例如平面按钮,大按钮,行按钮,颜色按钮,颜色填充按钮等。