在 asp.net core 项目上配置 material-ui答案

【问题标题】：configure material-ui on asp.net core project在 asp.net core 项目上配置 material-ui
【发布时间】：2020-04-28 14:24:37
【问题描述】：

我想在我的 asp.net 核心项目上运行材料设计。在视觉工作室 2019

但是我应该如何在我的项目中使用它们侧栏抽屉的示例代码是这样的。

  <aside class="mdc-drawer">
  <div class="mdc-drawer__content">
    <nav class="mdc-list">
      <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
        <span class="mdc-list-item__text">Inbox</span>
      </a>
      <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
        <span class="mdc-list-item__text">Outgoing</span>
      </a>
      <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
        <span class="mdc-list-item__text">Drafts</span>
      </a>
    </nav>
  </div>
</aside>

谁能帮忙怎么调用材料？

【问题讨论】：

标签： asp.net asp.net-core razor material-ui material-design

【解决方案1】：

来自this github about Material Components for the web，你可以试试下面的代码，不要添加客户端库

<aside class="mdc-drawer">
<div class="mdc-drawer__content">
    <nav class="mdc-list">
        <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
            <span class="mdc-list-item__text">Inbox</span>
        </a>
        <a class="mdc-list-item" href="#">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
            <span class="mdc-list-item__text">Outgoing</span>
        </a>
        <a class="mdc-list-item" href="#">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
            <span class="mdc-list-item__text">Drafts</span>
        </a>
    </nav>
</div>
</aside>

@section Scripts
{
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
  <!-- Required MDC Web JavaScript library -->
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  <script>
    mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
    mdc.list.MDCList.attachTo(document.querySelector('.mdc-list'));
  </script>
}

结果：

【讨论】：