如何在大屏幕上隐藏抽屉，只在小屏幕上显示。

问题描述

即使我在抽屉中添加了mdl-layout - small-screen-only类，汉堡包图像仍会出现在大屏幕上。

 < div class =mdl-layout mdl-js-layout mdl-layout  -  fixed-header> 
< header class =mdl-layout__header> 
< div class =mdl-layout__header-row> 
<！ - 标题 - > 
< span class =mdl-layout-title>标题< / span> 
<！ - 添加spacer，将导航向右移动 - > 
< div class =mdl-layout-spacer>< / div> 
<！ - 导航。我们把它隐藏在小屏幕。 - > 
< nav class =mdl-navigation mdl-layout  -  large-screen-only> 
< a class =mdl-navigation__linkhref => Link< / a> 
< a class =mdl-navigation__linkhref => Link< / a> 
< a class =mdl-navigation__linkhref => Link< / a> 
< a class =mdl-navigation__linkhref => Link< / a> 
< a class =mdl-navigation__linkhref => Link< / a> 
< a class =mdl-navigation__linkhref => Link< / a> 
< / nav> 
< / div> 
< / header> 
< div class =mdl-layout__drawer mdl-layout  -  small-screen-only> 
< span class =mdl-layout-title>标题< / span> 
< nav class =mdl-navigation> 
< a class =mdl-navigation__linkhref => Link< / a> 
< a class =mdl-navigation__linkhref => Link< / a> 
< a class =mdl-navigation__linkhref => Link< / a> 
< a class =mdl-navigation__linkhref => Link< / a> 
< / nav> 
< / div> 
< main class =mdl-layout__content> 
< div class =page-content><！ - 您的内容在这里 - >< / div> 
< / main> 
< / div> 
  

所有我需要的是隐藏抽屉，包括在大屏幕上的导航栏上的图标。感谢

解决方案

mdl-layout - 无桌面抽屉按钮

可选; mdl-layout 元素

Even though I add "mdl-layout--small-screen-only" class on the drawer, the hamburger image still appears on large screens.

<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">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer mdl-layout--small-screen-only">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

All I need is hiding drawer including the icon on navbar while on large screens. Thanks

解决方案

mdl-layout--no-desktop-drawer-button

Does not display a drawer button in desktop mode

Optional; goes on mdl-layout element

GitHub

这篇关于如何在大屏幕上隐藏抽屉，只在小屏幕上显示。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！