Question

在网络上使用Google网络组件，此处显示小吃栏消息，但未显示actionText。如果您想展示example和详细about

<!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>

Answer 1

如果您拥有actionHandler：

，则应添加actionText

＆＃13;

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);

＆＃13;

<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>

＆＃13;

snackbar actionText没有显示

1 个答案: