AngularDart Material Design 按钮

原创
2018/09/09 16:40
阅读数 114

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自定义。

也可以看看:

例子:

其他资源:

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

查看示例,查看源码

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部