基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

消息條

消息條會在視窗下方顯示一個小型彈出框，它可以在超時或使用者點擊或觸控螢幕其他地方後自動消失。

螢幕上最多只能同時顯示一個消息條，如果在消息條還未關閉時就開啟下一個消息條，則下一個消息條會被加入佇列，等當前消息條關閉後再開啟。

呼叫方式

呼叫方法 mdui.snackbar(params) 即可。

使用方法

消息條直接由 JavaScript 呼叫，無需編寫 HTML 版面配置。

有兩種方式可以呼叫消息條：

mdui.snackbar(message, params)
mdui.snackbar(params)

兩種方式的回傳值都是消息條的實例。

消息條支援的參數：

參數名稱	類型	預設值	說明
`message`	`string`		消息條的文字。透過 `mdui.snackbar(params)` 呼叫時，該參數不能為空。
`timeout`	`int`	`4000`	消息條自動隱藏的延遲時間，單位為毫秒。設為 0 則不自動關閉。
`position`	`string`	`bottom`	消息條的位置。 `bottom`：下方 `top`：上方 `left-top`：左上角 `left-bottom`：左下角 `right-top`：右上角 `right-bottom`：右下角
`buttonText`	`string`		按鈕的文字。
`buttonColor`	`string`	`#90CAF9`	按鈕的文字顏色，可以是顏色名稱或顏色值，如 `red`、`#ffffff`、`rgba(255, 255, 255, 0.3)` 等。
`closeOnButtonClick`	`boolean`	`true`	點擊按鈕時是否關閉消息條。
`closeOnOutsideClick`	`boolean`	`true`	點擊或觸控消息條以外的區域時是否關閉消息條。
`onClick`	`function`		在消息條上點擊的回呼函式。
`onButtonClick`	`function`		點擊消息條上的按鈕時的回呼函式。
`onOpen`	`function`		消息條開始開啟時的回呼函式。
`onOpened`	`function`		消息條開啟後的回呼函式。
`onClose`	`function`		消息條開始關閉時的回呼函式。
`onClosed`	`function`		消息條關閉後的回呼函式。

消息條實例擁有的方法：

方法名稱	說明
`close`	關閉消息條，關閉後消息條會被銷毀。

範例

普通消息條

範例

mdui.snackbar({
  message: 'Message sent'
});

帶回呼的消息條

範例

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('點擊了消息條');
  },
  onButtonClick: function(){
    mdui.alert('點擊了按鈕');
  },
  onClose: function(){
    mdui.alert('關閉了');
  }
});

不同位置的消息條

範例

mdui.snackbar({
  message: 'bottom',
  position: 'bottom',
});

mdui.snackbar({
  message: 'top',
  position: 'top',
});

mdui.snackbar({
  message: 'left-top',
  position: 'left-top',
});

mdui.snackbar({
  message: 'left-bottom',
  position: 'left-bottom',
});

mdui.snackbar({
  message: 'right-top',
  position: 'right-top',
});

mdui.snackbar({
  message: 'right-bottom',
  position: 'right-bottom',
});

工具提示

表格

消息條

呼叫方式

相關閱讀

使用方法

範例

普通消息條

帶回呼的消息條

不同位置的消息條