Как правильно нарисовать мое приложение Polymer для управления прокруткой

Question

Я создаю приложение Polymer, основанное на концепциях шаблона prpl, поддерживаемого в Google IO в этом году. В частности, связанные с этим вопросом это означает, что существует index.html файл, который загружает polyfil веб-компонентов и имеет один элемент в своем теле <my-app>

<my-app> в свою очередь, использует полимерные элементы <app-header-layout> установить, чтобы обеспечить эффект водопада на верхняя панель инструментов, некоторые управления сеансом (для обеспечения входа пользователя в систему), а затем делегирует все остальное элементу <my-pages>. В упрощенных терминах <my-app> выглядит следующим образом: -

<app-header-layout> 
    <app-header fixed effects="waterfall"> 
     <app-toolbar> 
     <h4 >Part of my toolbar</h4> 
     </app-toolbar> 
    </app-header> 
    <my-pages></my-pages> 
    </app-header-layout> 

<my-pages> использует <iron-pages> элемента, чтобы позволить пользователю выбирать среди различных страниц, каждая страница которого является его собственным элементом. В упрощенной форме, как это: -

<iron-pages role="main" selected="[[page]]" attr-for-selected="name" > 
    <my-menu name="home" menu-page="{{page}}"></my-menu> 
    <my-list name="list" list-page="{{page}}"></my-list> 
    <my-long-page name="long" long-page="{{page}}"></my-long-page> 
    </iron-pages> 

Причина мой пример имеет три страницы, потому что есть три случая, которые я хочу, чтобы покрыть. <my-menu> - это гибкая компоновка, состоящая из множества кнопок и нескольких отдельных элементов , используемых для группировки меню в разделы. В обычном сценарии рабочего стола это удобно находится в пределах экрана, но при отображении на смартфоне потребуется прокрутка для доступа к всем кнопкам. <my-long-page> - пример страницы с большим количеством контента. Для этого потребуется прокрутка для доступа к содержимому в нижней части страницы.

<my-list> является сложным - он будет состоять из заголовка, а затем элемента <iron-list>. Пример компоновки выглядит следующим образом: -

<div class="title"> 
    <span>List Page</span> 
    <paper-button id="return" raised>Return To Menu</paper-button> 
    </div> 
    <div class="header">This is the heading for my List</div> 
    <iron-list items="[[data]]" as="row"> 
    <template> 
     <div class="row" tabindex$="[[tabIndex]]" index="[[index]]"> 
     <div class="field">[[row.id]]</div> 
     <div class="field">[[row.name]]</div> 
     <div class="field">[[row.outcome]]</div> 
     </div> 
    </template> 
    </iron-list> 

В основном, мой список страниц есть контролируемый набор столбцов, но есть один класс страницы, где сервер посылает столбцы, которые будут отображаться обратно в запросе AJAX, чтобы получить данные. В этом случае я должен использовать элемент <template is="dom-repeat"> для отображения полей (как в верхнем заголовке списка, так и в содержимом строки списков).

Это приложение выросло органично в течение последних нескольких месяцев, и мой стиль - беспорядок. Несмотря на все мои усилия, большинство страниц имеют полосу прокрутки справа, даже когда контент не оправдывает ее, а страница <my-list> трудно получить полностью. Поэтому я делаю шаг назад, нарушая стиль и пытаясь приблизиться к нему с нуля. Я хочу использовать Полимеры сгибать-Box Примеси (например, @apply(--layout-vertical); и т.д.) в каждом из стилей пользовательских элементов для достижения следующего: -

• панель инструментов, которая остается в верхней части страницы всегда, с эффектом водопада, если контент должен прокручиваться под ним.
• Гибкая компоновка, которая будет работать на настольных компьютерах, планшетах и ​​телефонах
• В большинстве случаев горизонтальная полоса прокрутки - когда страницы сжимаются до минимальной ширины после их сгибания, и они все еще находятся за пределами устройства, которым они являются после чего должна появиться горизонтальная полоса прокрутки
• Когда содержимое страницы меньше, чем вертикальное пространство на экране, чтобы не было вертикальной полосы прокрутки, когда больше, чем вертикальное пространство, чтобы иметь полосу прокрутки.
• Страница <my-list> должна точно соответствовать экрану в большинстве случаев (поэтому нет полосы прокрутки для страницы в обычных условиях) с высотой элемента <iron-list>, чтобы полностью заполнить оставшееся вертикальное пространство на экране под заголовками.Разумеется, это вызовет собственную полосу прокрутки, если количество элементов в ее списке превышает доступное пространство. Это пространство для <iron list> должно иметь минимальную высоту, так что, когда высота экрана слишком мала, тогда и только тогда может появиться вторая, ориентированная на страницу вертикальная полоса прокрутки.

Я изо всех сил, чтобы достичь этого - в частности, элемент с <iron-list> можно легко установить его высоту до фиксированного размера, и он будет работать, но всякий раз, когда я пытаюсь применить прогибается, кажется, вырастет до полного размера его содержимое, а затем общая страница заканчивается прокруткой, и я теряю заголовок списка. Самое близкое, что я до сих пор использовал, чтобы использовать calc (100vh -200px) для установки высоты, но для этого требуется, чтобы я угадал (или знал) высоту заголовка над списком.

То, что я ищу это руководство относительно того, что положить внутрь <style> внутри <template> каждого из пользовательских элементов для достижения целей, перечисленных выше, в самой элегантной манере

Answer 1

Этот вопрос достаточно широк на самом деле больше вопрос о макете CSS и flexbox чем о Polymer сам, но я постараюсь ответить на некоторые из пунктов:

1. Панель инструментов: app-layout и app-header-layout должны дать вам фиксированную панель инструментов в верхней части. Используйте атрибут fullbleed, чтобы сделать его полноразмерным (`')
2. Что касается гибкой компоновки: самый легкий из моих соображений - сначала начать дизайн для мобильных устройств (определите свои стили, чтобы он хорошо работал для мобильного просмотра). Используйте ChromeDevTools для переключения на мобильный вид. Один мобильный просмотр работает, использует медиа-запросы и меняет некоторые классы CSS. В большинстве случаев вы можете, например, переключиться с --layout-horizontal на --layout-vertical. Вы также можете посмотреть на app-grid для содержания или макетов карт.
3. Горизонтальная полоса прокрутки: я постараюсь избежать ее как можно больше, чтобы иметь горизонтальную полосу прокрутки. Скорее переустановите контент или используйте разные парадигмы визуализации. В общем, вы должны работать с min-width и min-height и комбинировать его с настройками flex:1 для гибкого адаптируемого контента до доступного места.
4. Вертикальные полосы прокрутки чаще встречаются. Используя flexbox, вы можете сделать контент растянутым на все пространство avaialble и объединить его с min-height, вы можете убедиться, что отображается вертикальная полоса прокрутки.
5. iron-list требует явного размера для себя или для контейнера. Один из способов заключается в том, чтобы доработать его заранее. В качестве альтернативы вы можете использовать --layout-fit или --layout-vertical на контейнере и --layout-flex на iron-list, чтобы сделать его занятым.

Я бы порекомендовал читать некоторые материалы по flexbox. Иногда это может быть сложно (см. Этот вопрос, например: How to make flexbox children 100% height of their parent?)