Попытка изучить полимер, модифицируя учебник по полимеру

Мне удалось установить и успешно запустить учебник по полимеру 'unquote'.

Теперь я хочу изменить его, но я не могу понять, как это сделать. В частности, открытки выстроены вертикально в одну колонку. Я хотел бы выстроить их по-разному. Например, горизонтально и/или в нескольких столбцах.

В руководстве есть подсказка: http://www.polymer-project.org/docs/start/tutorial/step-2.html «Горизонтальные центральные атрибуты макета — это сокращение Polymer для создания макета flexbox».

Поэтому я просмотрел документацию по flexbox на css-tricks.com/snippets/css/a-guide-to-flexbox/.

Затем я изменил атрибуты с «макет по горизонтали по центру» на «макет по вертикали по центру», «макет по горизонтали слева», ...

Ничего не изменилось. Открытки всегда выстраиваются вертикально в один столбец. Может ли кто-нибудь направить меня в правильном направлении? Ответ может быть таким же простым, как ссылка на документацию, которую я не могу найти.

Эрван, я, должно быть, упускаю что-то очевидное. Я не могу понять, как включить вашу идею в этот код в post-list.html.

<div layout vertical center> 
    <template repeat="{{post in posts}}"> 
        <post-card favorite="{{post.favorite}}" on-favorite-tap="{{handleFavorite}}" hidden?="{{show == 'favorites' && !post.favorite}}"> 
            <img src="{{post.avatar}}" width="70" height="70"> 
            <h2>{{post.username}}</h2> 
            <p>{{post.text}}</p> 
        </post-card> 
    </template> 
</div> 

Я манекен.


person marcelino    schedule 08.07.2014    source источник
comment
Документы по макету Polymer   -  person link    schedule 08.07.2014
comment
Лично я считаю, что указание атрибутов макета не лучше, чем встроенный стиль в HTML, это не имеет смысла. Вы можете добиться того же результата, используя flexbox через CSS.   -  person link    schedule 08.07.2014
comment
спасибо, это полезно, как ссылка, так и личное примечание.   -  person marcelino    schedule 08.07.2014


Ответы (2)


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

Например, в моем приложении у меня есть основная карточка с бумажными предметами, сложенными вертикально. Атрибуты основной карты содержат: вертикальный макет. Если я изменю атрибуты на горизонтальное расположение, элементы будут располагаться горизонтально.

Вот HTML:

<core-card id="core_card" vertical layout >
  <paper-item label="Title 0" icon="keep" id="paper_item0" center horizontal layout>Description 0</paper-item>
  <paper-item label="Title 1" icon="keep" id="paper_item1" center horizontal layout>Description 1</paper-item>
  <paper-item label="Title 2" icon="keep" id="paper_item2" center horizontal layout>Description 2</paper-item>
</core-card>

Для получения дополнительной информации об атрибутах макета и flexbox: см. документацию по полимерам

person Erwan    schedule 18.07.2014
comment
Эрван, пожалуйста, просмотрите мои комментарии выше. Какие-либо предложения? - person marcelino; 29.07.2014
comment
@marcelino Я думаю, что ваше замешательство связано с пониманием того, как применяются атрибуты макета. Когда вы устанавливаете layout horizontal для элемента, элемент размещает свои дочерние элементы горизонтально. В примере Эрвана он настраивает содержимое каждого элемента карты так, чтобы оно располагалось горизонтально (которых нет). Чтобы сами карты разложить горизонтально, нужно указать layout horizontal на их контейнере. - person user3452758; 09.12.2014

Одна вещь, которую следует учитывать при модификации примеров полимеров, - это смотреть на

https://www.polymer-project.org/docs/polymer/layout-attrs.html

Что меня все еще смущает, так это использование o start, center и end вместо левого центрального и правого как для вертикального, так и для горизонтального макета.

person caraya    schedule 08.12.2014