Question

我指的是How to add a side-navigation in polymer，想看看如何让导航项像https://material.google.com/中的那样工作。想法是，当单击任何粗体导航项时，它们会下拉以显示项目。我是JavaScript / CSS和Polymer的新手。我将不胜感激任何帮助。

当我点击菜单按钮时，我希望显示菜单和子菜单。如你所见，我是聚合物的新手。

这就是我想要的：

<link rel="import" href="../paper-material/paper-material.html">
<link rel="import"href="../paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../paper-header-panel/paper-header-panel.html">
<link rel="import" href="../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-badge/paper-badge.html">
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
<link rel="import" href="../paper-menu/paper-menu.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-menu/paper-submenu.html">
<link rel="import" href="../app-toolbar/app-toolbar.html">

<link href="../iron-icons/iron-icons.html" rel="import">




<dom-module id="cst-tririga-ux">
    <style>
        :host {
            font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
        }

        paper-badge {
            --paper-badge-margin-left: -8px;
            --paper-badge-margin-bottom: -14px;
            --paper-badge-background: #29B6F6;
        }


        .app-toolbar-title {
            @apply(--layout-flex);
            font-family: "Helvetica Neue", Helvetica, Arial, Roboto;
            font-size: 20px;
            line-height: 28px;
            margin-left: 4px;
            pointer-events: none;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        app-toolbar, paper-toolbar section {
            padding-left: 30px;
        }

        app-toolbar, paper-toolbar,
        paper-toolbar /deep/ div.toolbar-tools {
            height: 45px;
        }

        #paperDrawerPanel [main] {
            text-align: center;
            background-color: var(--google-grey-100);
        }

        #paperDrawerPanel [drawer] {
            border-right: 1px solid var(--google-grey-300);
        }

        .horizontal-section {
            padding: 0 !important;
        }

        .avatar {
          display: inline-block;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
          background: #ccc;
        }

        paper-item {
          --paper-item: {
            cursor: pointer;
          };
        }

        .sublist paper-item {
          padding-left: 30px;
        }

        .sublist2 paper-item {
          padding-left: 50px;
        }


    }

    </style>
    <template>
        <!-- Toolbar -->
        <paper-toolbar>   
          <paper-icon-button icon="menu"></paper-icon-button>
          <span class="title">Title</span>
          <paper-icon-button icon="mail" id="notifications"></paper-icon-button>
          <paper-badge for="notifications" label="{{myNotifications.length}}"></paper-badge>
          <paper-icon-button icon="account-box" id="profile"></paper-icon-button>             
        </paper-toolbar>


    </template>
</dom-module>
<script>
    Polymer({

        is: "cst-tririga-ux",

        behaviors: [TriPlatViewBehavior]

    });
</script>

由于小号

Answer 1

这将通过app-drawer https://elements.polymer-project.org/elements/app-layout?active=app-drawer

获得

侧导航聚合物

1 个答案: