2014-09-26 5 views
2

Я создаю приложение, используя панель ящика-ящика. Панель ящика-ящика позволяет создавать ящик и главный заголовок. Если я поместил текст после </core-drawer-panel>, он не появится в приложении, поэтому я предполагаю, что все должно пройти внутри <div class="content">, чтобы оно было видно.Можно ли добавить статический нижний колонтитул к панели ящика-ящика?

Если я хочу создать статический нижний колонтитул, например, в строке состояния topeka, как бы я это сделал? Возможно ли это с ящиком-ящиком?

+0

Вообще согласно в качестве руководства, когда вы левая сторона СЧА, которая будет невидимым, когда вы используете мобильный вид вы должны создать нижний колонтитул внизу основного раздела, а не внизу –

ответ

2

Нижний колонтитул должен находиться внутри элемента, который вы указали с атрибутом main с ядром-ящиком.

footer { 
    position: fixed; 
    background: white; 
    width: 100%; 
    bottom: 0; 
} 

<core-drawer-panel> 
    <core-header-panel drawer> 
    ... 
    </core-header-panel> 
    <core-header-panel main> 
    <core-toolbar>asdf</core-toolbar> 
    <div fit> 
     <footer>Sticky Footer!</footer> 
    </div> 
    </core-header-panel> 
</core-drawer-panel> 

Демо: http://jsbin.com/dofiqiliyuxo/1/edit

+0

Сохранено мной, @ebidel! Полимерные макеты атрибутов FTW! –

+0

Друг говорит, чтобы избежать «позиции: исправлено», так как он плохо работает на мобильных устройствах, и если вам когда-нибудь понадобится несколько «исправленных», это может быть проблемой. –

2

Layout features:

<style> 
.content { 
    overflow-y: scroll; 
} 
footer { 
    background: rgba(255, 0, 0, 0.2); 
    height: 50px; 
    padding: 10px 15px; 
} 
</style> 

<core-drawer-panel> 
    <core-header-panel drawer> 
     <core-toolbar>...</core-toolbar> 
     <div> Drawer content... </div> 
    </core-header-panel> 
    <core-header-panel main> 
     <core-toolbar>Toolbar title</core-toolbar> 
     <div fit vertical layout> 
      <header>Top text</header> 
      <div flex class="content"> 
       ... 
      </div> 
      <footer>Footer!</footer> 
     </div> 
    </core-header-panel> 
</core-drawer-panel> 

Демо: http://jsbin.com/dabikurori/1/

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