2016-06-22 5 views
-2

Ich brauche eine zweite Papierschublade auf der rechten Seite meiner Website. Ist das mit Polymer 1 und dem Papierschubladenelement möglich? habe jemand eine Codebeispiel für mich?Polymer zweite Papierschublade

danke für Ihre Hilfe!

+0

ansehen Relevante Dokumente: [Polymer 'Paper-Drawer-Panel' Element] (https://elements.polymer-project.org/elements/paper-drawer-panel) –

+0

hey, danke! Ich lese die Dokumente, aber mein Problem ist nicht, dass ich die Papierschublade nicht auf der rechten Seite meiner Website platzieren kann. Ich brauche einen zweiten, um Inhalt hinein zu legen. –

+0

Sorry, ich kenne Polymer nicht. Ich habe gerade mit den Dokumenten verlinkt, um Zeit für andere Antworten zu sparen, die Polymer kennen, sich aber nicht daran erinnern, wie das "Papierschubladen-Panel" funktioniert. –

Antwort

2

Wenn Sie von Google unter Verwendung von Elementen zu halten, können Sie App-Layout des app-drawer-layout, verwenden sie haben sogar einen 2 drawer demo so können Sie seine source code für ein Beispiel

+0

Schön, ich mag diese Lösung am besten. – tony19

+0

danke an euch alle! –

1

Polymer paper-drawer-panel unterstützt nicht mehr als eine Schublade, aber Sie könnten dafür ein Drittanbieterelement verwenden: 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

Für die Zukunft empfehle ich https://customelements.io für alle Elemente suchen Sie benötigen. Die Suchergebnisse enthalten sowohl die eigenen Elemente von Polymer als auch die der Community.

+1

Du schlägst mich wieder dazu :). Aber ja, das 'Papier-Multidrawer-Panel' ist großartig! –

+0

@TomaszPluskiewicz :) Ich stimme zu – tony19

+0

Ich empfehle die 2-Schublade 'app-Schublade-Layout' aus Alans Antwort, obwohl das Endergebnis etwas anders ist als das in' Papier-Multidrawer-Layout'. – tony19

1

Nur die Schubladen nisten?

<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> 

Arbeiten jsbin: http://jsbin.com/qocuyurazi/edit?html,output

+0

Ordentliche Lösung. Dies scheint den gleichen Effekt zu erzielen (meistens) wie das 2-Schubladen-App-Drawer-Layout, auf das Alan hinweist. – tony19