AngularDart Material Design 按钮

MaterialButtonComponent

Selector:<material-button>

平面或凸起按钮，带有可选的波纹效果。

Attributes:

如下属性一般与<material-button>一块儿使用：

• icon：若是存在，则删除按钮的最小宽度样式。 要指定按钮中的实际图标，请使用<glyph>，<material-icon>或<img>。
• no-ink：若是存在，则从按钮中消除涟漪效应。
• clear-size：若是存在，则从按钮中删除最小宽度和边距。
• dense: 若是存在，将字体大小减少到13px，按钮高度减小到32px。

Styling:

指定按钮颜色的首选方法是使用mixins：

/* Make #myButton green with yellow text */
@include button-background-color('#myButton', green);
@include button-color('#myButton', yellow);

将mixin用于颜色的优势是它们不会覆盖禁用的状态颜色。您也能够像使用普通DOM元素同样使用CSS设置按钮的样式，尽管这也会影响禁用状态：

/* Make #myButton green with yellow text */
#myButton {
  background: green;
  color: yellow;
}

默认状况下，纹波与25％不透明度下的前景颜色相同。 要自定义颜色，请使用material-ripple选择器：

/* Make #myButton use a blue ripple instead of foreground color */
#myButton material-ripple {
  color: blue;
}

纹波的不透明度不能经过CSS自定义。

也能够看看：

例子：

• dart-lang/io_2017_components_codelab repo

其余资源：

• Material design codelab

Inputs:

• disabled bool 
  组件是否已禁用。
   
• raised bool 
  若是按钮应该具备使按钮看起来凸起的框阴影，则为true。
   
• role String 
  该组件的做用用于a11y。
   
• tabbable bool 
  组件是否能够列表。
   
• tabindex String 
  组件的选项卡索引。若是tabbable为true且disabled为false，则使用该值。

Outputs:

• trigger Stream<UIEvent>  
  经过单击，点击或按键激活按钮时触发。

MaterialFabComponent

Selector: <material-fab>

材料FAB是一个浮动操做按钮。 它是圆的，而且与MaterialButton的行为大体相同。

它能够是扁平的或凸起的。 凸起的按钮采用阴影设计。

Styling:

指定FAB颜色的首选方法是使用mixins：

/* Make #myButton green with yellow icon */
@include button-background-color('#myButton', green);
@include icon-button-color('#myButton', yellow);

将mixin用于颜色的优势是它们不会覆盖禁用的状态颜色。您也能够像使用普通DOM元素同样使用CSS设置FAB样式，尽管这也会影响禁用状态：

/* Make #myButton green with yellow icon */
#myButton {
  background: green;
  color: yellow;
}

默认状况下，纹波与25％不透明度下的前景颜色相同。 您能够使用此选择器自定义颜色：

/* Make #myButton use a blue ripple instead of foreground color */
#myButton material-ripple {
  color: blue;
}

纹波的不透明度不能经过CSS自定义。

Inputs:

• disabled bool 
  组件是否已禁用。
   
• raised bool 
  若是按钮应该具备使按钮看起来凸起的框阴影，则为true。
   
• role String 
  该组件的做用用于a11y。
   
• tabbable bool 
  组件是否能够列表。
   
• tabindex String 
  组件的选项卡索引。若是tabbable为true且disabled为false，则使用该值。

Outputs:

• trigger Stream<UIEvent>  
  经过单击，点击或按键激活按钮时触发。

MaterialButtonExample

查看示例，查看源码。