Question

如果我从a href中的mdc-toolbar__section标记中删除图标类，我会获得无格式链接，而不是匹配样式中<a>和</a>标记之间的文字

有没有办法让工具栏项目成为文本而不是图标？

这会在工具栏中显示图标：

    <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
      <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Download" alt="Download">file_download</a>
      <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Print this page" alt="Print this page">print</a>
      <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
    </section>

这显示未格式化的压缩链接并导致页面的其余部分呈现不正确：

    <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
      <a href="#" aria-label="Download" alt="Download">file_download</a>
      <a href="#" aria-label="Print this page" alt="Print this page">print</a>
      <a href="#"  aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
    </section>

Answer 1

答案是使用button代替an a href。

<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
  <button class="mdc-button mdc-button--unelevated" id="file">file_download</button>
  <button class="mdc-button mdc-button--unelevated" id="print">print</button>
  <button class="mdc-button mdc-button--unelevated" id="bookmark">bookmark</button>
</section>

然后通过向每个按钮添加以下事件，使一些Javascript导致按钮重定向到所需的链接：

onclick="location.href = 'yournewlocation';"

您需要使用无效按钮或选择正确的主题，否则文本将与工具栏的颜色相同。

Web工具栏的材料组件，带有文本链接而不是图标

1 个答案: