📌  相关文章
📜  Framework7按钮

📅  最后修改于: 2021-01-02 05:56:15             🧑  作者: Mango

Framework7按钮

Framework7提供了许多现成的按钮。您只需要在链接中添加适当的类或提交/按钮输入即可使用这些按钮。

iOS主题按钮

常用按钮

可以通过对任何链接或按钮输入使用按钮类来实现：

Usual Button 1


Usual Button 2


Usual Button 3

注意：默认情况下，Framework7中的每个按钮均为“ display：block”，并且将采用其父级宽度的100％。

活跃状态

只需向按钮添加其他活动类即可使您的按钮活动。

 Active Button

圆形按钮

button-round类用于添加圆形按钮。

Round Button 1


Round Button 2


Round Button Active

大按钮

您可以通过向输入按钮添加button-big class来使用big按钮。

Big Button 
Big Round Button 
Big Round Active Button

按钮行/分段控件

如果要获取分段的按钮行，则必须使用buttons-row类包装按钮。每个按钮的宽度相等。


  Button 1
  Button 2
  Button 3




  Button 1
  Button 2
  Button 3




  Button 1
  Button 2




  Button 1
  Button 2

填充按钮

填充按钮几乎与活动按钮相似，但旨在用作单个按钮，这对单击/轻击显示出不同的效果：

Fill Button 
Round Fill Button
Big Fill Button

颜色按钮

您可以使用10个默认颜色主题来给按钮着色。


    Button 1
    Button 2
    Button 3




    Button 1
    Button 2
    Button 3



Green


Round Red


Big Gray


Big Yellow

列表阻止按钮

您可以将按钮与列表视图一起使用。

List block buttons



  



Inset list block buttons

使用网格

您可以根据需要将按钮放置在网格中的任何位置。


  

    Cancel
  

  

    Submit

iOS主题按钮示例

让我们以一个示例来演示iOS主题按钮：




   
      
      
      
      iOS Theme Buttons
      
      
      
   

   
      

         

            

               

                  

                     

                        
 

                        
Buttons

                        
 

                     

                  

                  
                  

                     
Usual Buttons

                     

                        
 Usual Button

                     

                     
                     
Active Button

                     

                        
 Active Button

                     

                     
                     
Round Buttons

                     

                        
 Round Button

                        
 Round Button With Active

                     

                     
                     
Big Buttons

                     

                        
 Big Button 

                        
                        
 Rounded Big Button 

                        
                        
 Rounded Big Button and Active

                     

                     
                     
Buttons Row / Segmented Controller

                     

                        
 
                        Button 1
                        Button 2
                        Button 3

                        
                        
 
                        Button 1
                        Button 2

                     

                     
                     
Fill buttons 

                     

                        
Fill Button

                        
Big Fill Button 

                     

                     
                     
Color buttons

                     

                        

                           Button 1Button 2Button 3
                        

                        
                        

                           Button 1
                           Button 2
                           Button 3
                        

                        
                        
Green

                        
                        
Big Pink

                        
                        
Big Gray Button

                     

                     
                     
List block buttons

                     

                        
                     

                     
                     
Inset list block buttons

                     

                        
                     

                     
                     
Using Grid

                     

                        

                           
<
                           a href = "#" class = "button button-big button-fill color-blue">Submit

                           
<
                           a href = "#" class = "button button-big button-fill color-red">Cancel

材质主题按钮

Material主题用于通过使用适当的类来提供许多在您的应用程序中使用的按钮。

以下是素材主题按钮的列表：

常用/扁平按钮

如果要使用平面按钮，请对输入按钮使用按钮类。

Button


Button

按钮行

要使用按钮行，您必须使用按钮行类将按钮包装在一起。


  Button
  Button

凸起的按钮

使用“ button-raised”类来获取凸起样式的按钮。


  Button
  Button
  Button

凸起的填充按钮

对输入按钮使用按钮填充类。


  Button
  Button
  Button

颜色按钮

您可以使用20个默认的“材质”颜色主题为按钮着色。


  Red
  Green
  Blue




  Orange
  Pink
  Purple




  Cyan
  Teal
  Indigo

颜色填充按钮

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


  Red
  Green
  Blue




  Orange
  Pink
  Purple




  Cyan
  Teal
  Indigo

彩色填充按钮

您可以通过应用按钮凸起，按钮填充和颜色类别来使用颜色凸起的填充按钮。


  Red
  Green
  Blue




  Orange
  Pink
  Purple




  Cyan
  Teal
  Indigo

彩色波纹按钮

如果要添加不同颜色的波纹，只需在按钮上添加ripple- [color]类。


  Button
  Button
  Button




  Button
  Button
  Button

大按钮

要使按钮变大，请将button-big class添加到button。


  Button
  Button




  Button
  Button

列表阻止按钮

您也可以将按钮与列表视图一起使用。

材质主题按钮示例

让我们以一个示例来演示Material主题按钮：



   
      
      
      
      iOS Theme Buttons
      
      
   

   
      

         

            

               

                  
                  

                     

                        
Buttons

                     

                  

                  
                  

                     
Usual/Flat Buttons

                     

                        
Button

                     

                     
                     
Buttons Row

                     

                        

                           Button
                           Button
                        

                     

                     
                     
Raised Buttons

                     

                        

                           Button
                           Button
                           Button
                           Button
                        

                     

                     
                     
Raised Fill Buttons

                     

                        

                           Button
                           Button
                           Button
                           Button
                        

                     

                     
                     
Color Buttons

                     

                        

                           Pink
                           Indigo
                           Blue
                        

                        
                        

                           Cyan
                           Green
                           Purple
                        

                        
                        

                           Orange
                           Teal
                           Red
                        

                     

                     
                     
Color Fill Buttons

                     

                        

                           Pink
                           Indigo
                           Blue
                        

                        
                        

                           Cyan
                           Green
                           Purple
                        

                        
                        

                           Orange
                           Teal
                           Red
                        

                     

                     
                     
Color Raised Fill Buttons

                     

                        

                           Pink
                           Indigo
                           Blue
                        

                        
                        

                           Cyan
                           Green
                           Purple
                        

                        
                        

                           Orange
                           Teal
                           Red
                        

                     

                     
                     
Color Ripple Buttons

                     

                        

                           Button
                           Button with green ripple
                           Button with gray ripple
                        

                        
                        

                           Button
                           Button
                           Button
                        

                     

                     
                     
Big Buttons

                     

                        

                           Button
                           Button
                        

                        
                        

                           Button
                           Button
                        

                     

                     
                     
List Block Buttons