2016-06-22 2 views
-2

Мне нужен второй ящик для бумаги в правой части моего сайта. Возможно ли это с помощью полимера 1 и элемента бумагоделателя? У кого-нибудь есть образец кода для меня?Полимерный второй ящик для бумаги

благодарит за вашу помощь!

+0

Соответствующие документы: [Полимер 'элемент-ящик-панель'] (https://elements.polymer-project.org/elements/paper-drawer-panel) –

+0

эй, спасибо! Я читаю документы, но моя проблема заключается не в том, что я не могу разместить бумажный ящик с правой стороны моего сайта. Мне нужно второе, чтобы поместить в него контент. –

+0

Извините, я не знаю Полимера. Я просто связывался с документами, чтобы сэкономить время для других ответчиков, которые знают Полимера, но не помнят, как работает бумага-панель-панель. –

ответ

2

Если вы хотите продолжать использовать элементы с помощью Google, вы можете использовать приложение-компоновщика app-drawer-layout, у них даже есть 2 drawer demo, так что вы можете просмотреть его source code для примера

+0

Ницца, мне нравится это решение лучше всего. – tony19

+0

спасибо всем вам! –

1

Polymer's paper-drawer-panel не поддерживает более одного ящика, но для этого вы можете использовать сторонний элемент: paper-multidrawer-panel.

<paper-multidrawer-panel> 
    <paper-header-panel left-drawer>...</paper-header-panel> 
    <paper-header-panel right-drawer>...</paper-header-panel> 
    <paper-header-panel main>...</paper-header-panel> 
</paper-multidrawer-panel> 

codepen

Для дальнейшего использования, я рекомендую искать https://customelements.io для любых элементов, вам может понадобиться. Результаты поиска включают собственные элементы Polymer, а также те, которые были внесены сообществом.

+1

Ты снова меня избил! :). Но да, 'paper-multidrawer-panel' отлично! –

+0

@TomaszPluskiewicz :) Согласен – tony19

+0

Я рекомендую 2-ящик 'app-drawer-layout' из ответа Алана, хотя конечный результат немного отличается от результата в' paper-multidrawer-layout'. – tony19

1

Просто гнездо ящики?

<paper-drawer-panel force-narrow drawer-toggle-attribute="d1" class="fit"> 
    <div drawer> 
     <!-- Left drawer here --> 

    </div> 
    <div main class="fit"> 
     <paper-drawer-panel force-narrow right-drawer drawer-toggle-attribute="d2" class="fit"> 
     <div drawer> 
      <!-- Right drawer here --> 

     </div> 
     <div main class="fit"> 

      <!-- Main contents go here --> 
      <h1>Left-drawer toggle</h1> 
      <paper-icon-button d1 icon="menu"></paper-icon-button> 
      <h1>Right-drawer toggle</h1> 
      <paper-icon-button d2 icon="menu"></paper-icon-button> 

     </div> 
     </paper-drawer-panel> 
    </div> 
    </paper-drawer-panel> 

Работа jsbin: http://jsbin.com/qocuyurazi/edit?html,output

+0

Удобное решение. Кажется, что этот эффект получается (в основном) как 2-ящик «app-drawer-layout», который указывает Алан. – tony19