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

查看示例，查看源碼。