настроить Material-UI на asp. net основной проект - PullRequest
0 голосов
/ 28 апреля 2020

Я хочу запустить материал-дизайн в своем основном проекте asp. net. в visual studio 2019 first I add Client-side Library as you see

after I installed it these folders came up

но как использовать их в моем проекте пример кода для ящика боковой панели Это.

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

Кто-нибудь может помочь, как назвать материал?

1 Ответ

1 голос
/ 29 апреля 2020

Из этого github о компонентах материалов для Интернета , вы можете попробовать следующий код, не добавляя библиотеку на стороне клиента

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

Результат:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...