问快照条actionText不显示
EN

Stack Overflow用户

提问于 2017-10-31 06:05:05

回答 1查看 560关注 0票数 0

使用google组件，这里显示的是快餐店消息，但没有显示actionText。如果您想显示示例和detail 关于

<!DOCTYPE html>
<html class="mdc-typography">
   <head>
     <title>Material Components for the web</title>
     <link rel="stylesheet"
         href="node_modules/material-components-web/dist/material-components-web.css">
     <meta name="viewport" content="width=device-width">
           <script src="main.js" charset="utf-8"></script>
   </head>
   <body>
     <div class="mdc-snackbar mdc-snackbar--align-start"
          aria-live="assertive"
          aria-atomic="true"
          aria-hidden="true">
       <div class="mdc-snackbar__text"></div>
       <div class="mdc-snackbar__action-wrapper">
         <button type="button" class="mdc-snackbar__action-button"></button>
       </div`
     </div>

     <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
     <script>mdc.autoInit()</script>
     <script>

 var q=mdc.snackbar.MDCSnackbar.attachTo(document.querySelector('.mdc-snackbar'));
   const data={
     message: 'Message deleted',
     actionText: 'Undo'
   };
   q.show(data);
     </script>
   </body>
 </html>

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-10-31 07:38:56

如果您有actionHandler，则应该添加actionText

var q=mdc.snackbar.MDCSnackbar.attachTo(document.querySelector('.mdc-snackbar'));
   const data={
     message: 'Message deleted',
     actionText: 'Undo',
     actionHandler: function() {
       console.log(data);
     }
   };
   q.show(data);

<script src="https://material-components-web.appspot.com/assets/material-components-web.js"></script>
<!DOCTYPE html>
<html class="mdc-typography">
   <head>
     <title>Material Components for the web</title>
     <link rel="stylesheet"
         href="node_modules/material-components-web/dist/material-components-web.css">
     <meta name="viewport" content="width=device-width">
           <script src="main.js" charset="utf-8"></script>
   </head>
   <body>
     <div class="mdc-snackbar mdc-snackbar--align-start"
          aria-live="assertive"
          aria-atomic="true"
          aria-hidden="true">
       <div class="mdc-snackbar__text"></div>
       <div class="mdc-snackbar__action-wrapper">
         <button type="button" class="mdc-snackbar__action-button"></button>
       </div>
     </div>

     <script>mdc.autoInit()</script>
     
   </body>
 </html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47028846

复制

相似问题

问快照条actionText不显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问快照条actionText不显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问快照条actionText不显示
EN