Как добиться чего-то вроде контейнеров или сетки в Polymer Project 1.0 - как?

Я хотел бы создать отзывчивый веб-сайт с помощью Polymer Starter Kit + готовых полимерных элементов.

Теперь, как достичь чего-то вроде контейнера или сетки, например, в среде css, например bootstrap?

Возможно ли это только с помощью Polymer, или моими опциями являются только мой собственный код или каркасная/сетчатая система, такая как скелет, бурбон и т.д.?

Я попытался взглянуть на "железо-гибкий" макет, но он не рухнет друг на друга, как сетка на меньших размерах экрана, вы можете увидеть это здесь:

http://plnkr.co/edit/ds6gAyohtZW4ESkxu83o?p=preview

<div style="height:100%">
 <div>
 Left column
 </div>
 <div>
 Right column
 </div>
 </div>

Он не "рушится", поэтому ящики будут находиться под друг другом, если вы измените размер окна, оно просто масштабируется.

Итак, как мне подойти к нему?

EDIT: Я хотел бы добиться чего-то вроде этого: http://www.bootply.com/4CJ9GOYEuH

Таким образом, если вы измените размер окна, то кусты будут разваливаться друг на друга, а не оставаться рядом друг с другом.

3 ответа

Вы можете использовать комбинации iron-flex-layout и iron-media-query в комбинации. Утюг-медиа-запрос будет обновляться на основе размера видового экрана, и вы можете привязать его соответствия медиа-запросу другим элементам.

Наивно, вы можете сделать следующее, но в равной степени вы можете использовать queryMatches для генерации классов "flex-n" для вашего макета.

<template is="dom-if" if="{{queryMatches}}">
 <div class="horizontal layout" style="height:100%">
 <div class="flex-1">
 Left column
 </div>
 <div class="flex-4">
 Right column
 </div>
 </div>
 </template>
 <template is="dom-if" if="{{!queryMatches}}">
 <div>Left column</div>
 <div>Right column</div>
 </template>


Вы можете добавить CSS-сетку Bootstrap внутри веб-компонента, например:

<dom-module id="bootstrap-grid">
 <template strip-whitespace="">
 <style>
 /* Grid styles from Bootstrap */
 </style>
 <content></content>
 </template>
 
</dom-module>

Стили сетки Bootstrap слишком велики для SO-ответа, поэтому здесь JSFiddle, а здесь он находится на GitHub.

И затем внутри этого компонента вы можете использовать его так же, как вы в

:
<bootstrap-grid>
 <div>
 <div><div>one</div></div>
 <div><div>two</div></div>
 <div><div>three</div></div>
 </div>
 <div>
 <div><div>A</div></div>
 <div><div>B</div></div>
 <div><div>C</div></div>
 <div><div>D</div></div>
 </div>
</bootstrap-grid>

В скрипте Я добавил --bootstrap-grid-gutter для настройки размера желоба, но я не могу настроить контрольные точки из-за проблемы с выравниванием CSS. Вы можете сделать это с помощью , если вам это нужно.


Попробуйте Iron Grid IRON-GRID и найдите более Custome Elements при необходимости.

licensed under cc by-sa 3.0 with attribution.