md-button

来源：互联网发布：开淘宝店怎样提高销量编辑：程序博客网时间：2024/04/28 01:47

FAB

FAB是浮起来的Button

<md-button class="md-fab" aria-label="FAB">    <md-icon class="material-icons">add</md-icon></md-button>

固定右下

  #fab {    position: fixed;    right: 3em;    bottom: 3em;  }

取消圆角

https://material.angularjs.org/latest/CSS/button
当有多个选择器时，id的优先级是最高的

<md-button id="btn">**</md-button><style>  #btn {    border-radius: 0 0 0 0;  }</style>

平铺窗口

layout-fill

<md-button layout-fill>***</md-button>

Material Icons

css:

@font-face {   font-family: 'Material Icons';   font-style: normal;   font-weight: 400;   src: local('Material Icons'), local('MaterialIcons-Regular'),   url(MaterialIcons-Regular.woff2) format('woff2');}.material-icons {   font-family: 'Material Icons';   font-weight: normal;   font-style: normal;   font-size: 24px;   line-height: 1;   letter-spacing: normal;   text-transform: none;   display: inline-block;   white-space: nowrap;   word-wrap: normal;   direction: ltr;   -webkit-font-feature-settings: 'liga';   -webkit-font-smoothing: antialiased;}

url()改成字体图标文件路径，字体图标文件在
https://github.com/google/material-design-icons/tree/master/iconfont
还有有适配更好的css
在html中引入

<link href="src/icon/icon.css" rel="stylesheet">

使用

<i class="material-icons">android</i>

将android改成图标名字
图标名字和图片在
https://design.google.com/icons/
有的没有
在angular-material中的写法

<md-button>   <md-icon class="material-icons">menu</md-icon></md-button>

位置

https://material.angularjs.org/latest/layout/alignment

API

https://material.angularjs.org/latest/api/directive/mdButton

demo

https://material.angularjs.org/latest/demo/button

0 0