Polymer 聚合：在登录页面上隐藏菜单

我是新来的。我想在登录页面中隐藏侧栏菜单。我有一个函数

IsLoggedIn

，它返回true或false。我如何实现它？ 这是我的密码

<app-drawer-layout fullbleed narrow="{{narrow}}">
  <!-- Drawer content -->
  <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="home-quotes" href="[[rootPath]]home-quotes">Home</a>
      <a name="secret-quotes" href="[[rootPath]]secret-quotes">Secret</a>
    </iron-selector>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout has-scrolling-region>

    <app-header slot="header" condenses reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
        <div main-title>My App</div>
        <a name="register-login" href="[[rootPath]]register-login">Login</a>
      </app-toolbar>
    </app-header>

    <iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="view404"
        role="main">
      <home-quotes name="home-quotes"></home-quotes>
      <secret-quotes name="secret-quotes"></secret-quotes>
      <register-login name="register-login"></register-login>
      <not-found name="not-found"></not-found>
    </iron-pages>
  </app-header-layout>
</app-drawer-layout>

---

我不完全确定你对侧边栏菜单的意思，但我认为你是在尊敬抽屉。

您可以在app drawer元素上使用hidden属性。 将函数的返回值存储在属性中，并将其绑定到隐藏的属性。

在下面的示例中，我将代码简化为基本代码，以使其更具可读性

抽屉：

<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]" hidden="[[isLoggedIn]]">
   <app-toolbar>Menu</app-toolbar>
</app-drawer>

loggedIn: function() {
   //I just assume the user is logged in...
   this.set('isLoggedIn', true);
   // You might have to call resetLayout()
   this.resetLayout();
}

---

我不完全确定你对侧边栏菜单的意思，但我认为你是在尊重抽屉。

您可以在app drawer元素上使用hidden属性。 将函数的返回值存储在属性中，并将其绑定到隐藏的属性。

在下面的示例中，我将代码简化为基本代码，以使其更具可读性

抽屉：

<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]" hidden="[[isLoggedIn]]">
   <app-toolbar>Menu</app-toolbar>
</app-drawer>

loggedIn: function() {
   //I just assume the user is logged in...
   this.set('isLoggedIn', true);
   // You might have to call resetLayout()
   this.resetLayout();
}

将抽屉包装为

[[calculateFreeBusy（udata.isFree）]]

将抽屉包装为

[[calculateFreeBusy（udata.isFree）]]

要完全隐藏应用程序特定页面上的菜单，我必须做两件事：

• 按照其他答案中的建议隐藏

  应用程序抽屉

  （我选择设置

  隐藏

  属性，但如果也可以，则将其包装在

  dom中）

• 此外，在

  应用程序抽屉布局

  上为这些页面设置

  强制缩小

  （），以使页面内容在比响应宽度更宽的屏幕上居中

例如：

<app-drawer-layout
    responsive-width="1024px"
    fullbleed
    force-narrow="[[isHidingMenu(page)]]">
  <app-drawer
      slot="drawer"
      hidden$="[[isHidingMenu(page)]]">
    <!-- ... -->
  </app-drawer>
  <!-- ... -->
</app-drawer-layout>

---

如果当前页面不应该有抽屉菜单，则需要添加实例方法

isHidingMenu（page）

，并返回true。

要完全隐藏应用程序特定页面上的菜单，我必须做两件事：

• 按照其他答案中的建议隐藏

  应用程序抽屉

  （我选择设置

  隐藏

  属性，但如果也可以，则将其包装在

  dom中）

• 此外，在

  应用程序抽屉布局

  上为这些页面设置

  强制缩小

  （），以使页面内容在比响应宽度更宽的屏幕上居中

例如：

<app-drawer-layout
    responsive-width="1024px"
    fullbleed
    force-narrow="[[isHidingMenu(page)]]">
  <app-drawer
      slot="drawer"
      hidden$="[[isHidingMenu(page)]]">
    <!-- ... -->
  </app-drawer>
  <!-- ... -->
</app-drawer-layout>

---

如果当前页面不应具有抽屉菜单，则需要添加实例方法

isHidingMenu（page）

，并返回true。

我希望登录页面具有全页面宽度。实际上我想删除登录页面中的菜单。哪个菜单？隐藏属性将隐藏抽屉菜单。您也可以在其他菜单上使用它。hidden=“[[isLoggedIn]]”仅隐藏内容。这不是删除侧边栏。空白侧边栏仍然存在。您必须强制您的布局全屏显示抽屉之前显示。我更新了我的答案，不确定它是否会起作用。尝试调用resetLayout（）；

resetLayout（）。实际上我想删除登录页面中的菜单。哪个菜单？隐藏属性将隐藏抽屉菜单。您也可以在其他菜单上使用它。hidden=“[[isLoggedIn]]”仅隐藏内容。这不是删除侧边栏。空白侧边栏仍然存在。您必须强制您的布局全屏显示抽屉之前显示。我更新了我的答案，不确定它是否会起作用。尝试调用resetLayout（）；
resetLayout（）
函数在哪里？我相信布局不是窄的，所以当抽屉被移除时，它会显示空白。错误是什么。。？Dom if是条件呈现元素。首先，我试过这样做，但不起作用，这就是我问问题的原因。：）我想我知道为什么。但我会在2-3小时后首先在电脑上检查它。我在我的应用程序上进行了测试，运行良好（我的应用程序代码高于剪断的代码），我试图在codepen上演示，但我还不能。为了简单起见，我将抽屉包装在
dom if-template
之间。确保在
static get properties（）{return]中预定义了
isLoggedIn
属性{
section我相信布局不是在窄带上，所以当抽屉被移除时，它会显示空白。错误是什么？Dom if是条件渲染元素。首先，我这样尝试，但不起作用，这就是我问问题的原因。：）我想我知道原因。但我会在2-3小时后首先在计算机上检查它。我在app和工作良好（我的应用程序代码在剪断的代码之上），我试图在codepen上演示，但我还不能。为了一个简单的结果，我将抽屉包装在
dom if template
之间。请确保在
静态获取属性（）{return{
部分预先定义了
isLoggedIn
属性