Переключить бумагу-панель-панель внутри бумажной панели-заголовка

Я пытаюсь использовать бумажные элементы, и я немного играл с разными панелями. Я попытался модифицировать пример из документации:Переключить бумагу-панель-панель внутри бумажной панели-заголовка

<paper-drawer-panel> 
    <paper-header-panel drawer> 
    <paper-toolbar><div>Application</div></paper-toolbar> 
    <div> Drawer content... </div> 
    </paper-header-panel> 
    <paper-header-panel main> 
    <paper-toolbar> 
     <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> 
     <div>Title</div> 
    </paper-toolbar> 
    <div> Main content... </div> 
    </paper-header-panel> 
</paper-drawer-panel>

Я хочу, чтобы иметь ящик внутри панели заголовка, так что заголовок взять всю ширину страницы.

Вот моя попытка: (plunker)

<body class="fullbleed layout vertical"> 
    <paper-header-panel> 
     <paper-toolbar> 
     <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> 
     <paper-icon-button icon="menu" (click)="document.querySelector('#panel').togglePanel()"></paper-icon-button> 
     <div>My app</div> 
     </paper-toolbar> 
     <paper-drawer-panel id="panel"> 
     <div drawer> drawer </div> 
     <div main> main </div> 
     </paper-drawer-panel> 
    </paper-header-panel> 
    </body>

Здесь ящик не закрывается. Кнопки ничего не делают. В моей консоли я могу использовать $('#panel').togglePanel(), и я вижу, что он меняет атрибут selected на панели, но ящик не закрывается. Что не так с моим кодом и как я могу заставить кнопку «меню» закрыть мой ящик?

Edit: заменить $('#panel') на document.querySelector('#panel')

источник

2015-11-19 dgn

Вы пытались использовать JQuery, здесь есть путь Javascript сделать это:

заменить:

(click)="$('#panel').togglePanel()"

с:

onClick="document.querySelector('#panel').togglePanel()"

источник

2015-11-19 16:35:39

Это не работает лучше. Я обновил плункер с вашим предложением. $() работал на консоли для меня, импортированный из полимера или angular2, не уверен – dgn

Работает для меня http://plnkr.co/edit/SRChYXQMatrsGddudofs?p=preview Просто проверьте, что вы делаете его достаточно узким, чтобы скрыть ничью (и вы нажимаете вторую кнопку) –

О, интересно. Я на Chrome 48, и он не работает. – dgn

Переключить бумагу-панель-панель внутри бумажной панели-заголовка

ответ

Смежные вопросы