MDL: Как переключать разделы с помощью навигационного ящика? - PullRequest
Новая
       13

MDL: Как переключать разделы с помощью навигационного ящика?

0 голосов
/ 26 февраля 2019

С учетом следующего примера кода (с https://getmdl.io/ компонентами в комплекте): 

<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">Testpage</span>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Menu</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#scroll-tab-1">Test1</a>
        <a class="mdl-navigation__link" href="#scroll-tab-2">Test2</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
        <div class="page-content">
          <!-- Your content goes here -->
          Test1
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-2">
        <div class="page-content">
          <!-- Your content goes here -->
          Test2
        </div>
      </section>
    </main>
  </div>
</body>

Как переключаться между разделами «scroll-tab-1» и «scroll-tab-2» с использованием элементов ящика навигации?

Это толькоу меня работает с элементами панели вкладок: 

<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">Testpage</span>
      </div>
      <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
        <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Test1</a>
        <a href="#scroll-tab-2" class="mdl-layout__tab">Test2</a>
      </div>
    </header>
    <main class="mdl-layout__content">
      <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
        <div class="page-content">
          <!-- Your content goes here -->
          Test1
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-2">
        <div class="page-content">
          <!-- Your content goes here -->
          Test2
        </div>
      </section>
    </main>
  </div>
</body>

Удивительно, но я не могу найти ничего подобного, и все учебники, которые я нашел, имеют только href="" элементы навигации.Может быть, я неправильно понимаю, как использовать навигационный ящик?

Заранее спасибо

1 Ответ

0 голосов
/ 24 апреля 2019

У меня была та же проблема, и я не мог найти простое решение (было бы хорошо, если бы они добавили спецификацию MD для вертикальных панелей табуляции).Я закончил тем, что создал функцию, которая показывает элемент, по которому щелкнули, и скрывает остальные.Функция имеет один аргумент: идентификатор отображаемого элемента.Я вызываю эту функцию в событии document.onload, передавая ей идентификатор элемента, который должен быть видимым по умолчанию, и вызываю ее в каждом событии onclick элементов mdl-navigation__link, передавая ему идентификатор элемента содержимого для отображения.

<script>
	document.onload = show("dashboard");
	function show(targetId) {
		var elements = document.getElementById("content").querySelectorAll(".mdl-card");
		for (var i=0 ; i < elements.length; i++) {
			if (elements[i].id === targetId) {
				elements[i].style.display = 'block';
			} else {
				elements[i].style.display = 'none';
			}
		}
	}
</script>
<div class="mdl-layout__drawer">
	<span class="mdl-layout-title">CSRS</span>
	<nav class="mdl-navigation">
	   <a class="mdl-navigation__link" href="#order" onclick="show('order')">Order Manager</a>
	   <a class="mdl-navigation__link" href="#inventory" onclick="show('inventory')">Inventory Manager</a>
	   <a class="mdl-navigation__link" href="#dahsboard" onclick="show('dashboard')">Dashboard</a>
	   <a class="mdl-navigation__link" href="#reports" onclick="show('reports')">Reports</a>
	</nav>
</div>
...