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

查看示例，查看源码。

(adsbygoogle = window.adsbygoogle || []).push({}); function googleAdJSAtOnload() { var element = document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; element.async = true; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", googleAdJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload = googleAdJSAtOnload; }