1

a href如果我从a 中的标签中删除图标类，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>
4

1 回答 1

0

答案是使用 abutton而不是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';"

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

于 2018-01-24T16:29:30.957 回答