materialize CSS如何使用按钮?代码示例

2021年3月20日16:35:30 发表评论 613 次浏览

按钮组件及其内部的链接可能是最重要的功能之一, 它允许用户与网页进行交互并执行各种功能, 并从一个网页移动到另一个网页。以下是定义的各种按钮及其效果:

  • 提高:它用于设置波纹点击效果, 也可以与其他各种类别组合使用。
    <a class="waves-effect waves-light btn">button</a>
    <a class="waves-effect waves-light btn"><i class="material-icons left">list</i>button</a>
    <a class="waves-effect waves-light btn"><i class="material-icons right">list</i>button</a>
    
  • 浮动:用于创建圆形按钮。
    <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">edit</i></a>
  • 平面:用于将平面显示效果设置为按钮, 以减少过多的分层。例如, 平面按钮通常用于卡片中的操作, 以免重叠阴影过多。
     <a class="waves-effect waves-teal btn-flat">Button</a>
  • 提交按钮:它用来表示为主按钮。使用按钮提交表单时, 可以使用类型为Submit的按钮标签代替输入标签。
    <button class="btn waves-effect waves-light" type="submit" name="action">Submit
        <i class="material-icons right">send</i>
      </button>
  • 大:它用于需要更多注意的按钮。
    <a class="waves-effect waves-light btn-large">Button</a>
    <a class="waves-effect waves-light btn-large"><i class="material-icons left">list</i>button</a>
    <a class="waves-effect waves-light btn-large"><i class="material-icons right">list</i>button</a>
    
  • 小:当鼠标和键盘是主要输入方法时使用, 此按钮用于更密集的UI布局。
<a class="waves-effect waves-light btn-small">Button</a>
<a class="waves-effect waves-light btn-small"><i class="material-icons left">list</i>button</a>
<a class="waves-effect waves-light btn-small"><i class="material-icons right">list</i>button</a>
  • 禁用:用于创建禁用按钮。
<a class="btn-large disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled"><i class="material-icons">edit</i></a>

例子:

的HTML

<!DOCTYPE html>
< html >
  
< head >
   <!--Import Google Icon Font-->
   < link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
     rel = "stylesheet" >
  
   <!-- Compiled and minified CSS -->
   < link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" >
  
   < script type = "text/javascript" src =
     "https://code.jquery.com/jquery-2.1.1.min.js" >
   </ script >
  
   <!--Let browser know website is
       optimized for mobile-->
   < meta name = "viewport" content
     = "width=device-width, initial-scale=1.0" />
</ head >
  
< body >
  
   < div class = "card-panel" >
     < h3 >Raised Button</ h3 >
     < a class="waves-effect waves-light 
         btn green">button</ a >
     < a class="waves-effect waves-light 
         btn green">< i class="material-icons 
         left">list</ i >button</ a >
     < a class="waves-effect waves-light 
       btn green">< i class="material-icons
       right">list</ i >button</ a >
   </ div >
  
   < div class = "card-panel" >
     < h3 >Floating Button</ h3 >
     < a class="btn-floating btn-large 
       waves-effect waves-light teal">
       < i class = "material-icons" >edit</ i >
     </ a >
  
   </ div >
   < div class = "card-panel" >
     < h3 >Flat Button</ h3 >
     < a class="waves-effect waves-green 
       btn-flat">Button</ a >
  
   </ div >
   < div class = "card-panel" >
     < h3 >Submit Button</ h3 >
     < button class="btn green waves-effect 
       waves-light" type = "submit" 
       name = "action" >Submit
       < i class = "material-icons right" >send</ i >
     </ button >
   </ div >
   < div class = "card-panel" >
     < h3 >Large Button</ h3 >
     < a class="waves-effect waves-light 
         btn-large green">Button</ a >
     < a class="waves-effect waves-light 
         btn-large green">< i class =
         "material-icons left" >list</ i >
         button
     </ a >
     < a class="waves-effect waves-light 
       btn-large green">< i class="material-icons 
       right">list</ i >button</ a >
  
   </ div >
   < div class = "card-panel" >
     < h3 >Small Button</ h3 >
     < a class="waves-effect waves-light 
       btn-small green white-text">Button</ a >
     < a class="waves-effect waves-light 
       btn-small green white-text">< i class =
       "material-icons left" >list</ i >button</ a >
     < a class="waves-effect waves-light 
       btn-small green white-text">< i class =
       "material-icons right" >list</ i >button</ a >
  
   </ div >
   < div class = "card-panel" >
     < h3 >Disabled Button</ h3 >
     < a class = "btn-large disabled" >Button</ a >
     < a class = "btn disabled" >Button</ a >
     < a class = "btn-flat disabled" >Button</ a >
     < a class = "btn-floating disabled" >
       < i class = "material-icons" >edit</ i ></ a >
  
   </ div >
   <!-- Compiled and minified JavaScript -->
   < script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" ></ script >
</ body >
  
</ html >

输出如下:

materialize CSS如何使用按钮?代码示例

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: