Angular Material Layout — Как создавать прокручиваемые разделы

Я хотел бы использовать только материальные директивы, насколько это возможно, вместо того, чтобы вводить некоторые необработанные элементы CSS.

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

+-------------------------------+
| Toolbar                       |
|----------+--------------------|
| Nav-Bar  | +----------------+ |
| +------+ | |                | |
| | List | | |                | |
| |      | | | un-scrollable  | |
| |      | | |     content    | |
| +------+ | | (fills         | |
| +------+ | | available area)| |
| | List | | |                | |
| |      | | |                | |
| +------+ | +----------------+ |
+----------+--------------------+

Панель навигации должна оставаться фиксированной высоты, а списки должны прокручиваться.

Различные разделы представляют собой компоненты, реализованные в виде угловых директив (и шаблонов). Одна из проблем заключается в том, что составление приложения таким образом, похоже, нарушает макет css, установленный директивами материала для меня.

Любая помощь будет оценена.


javascript angularjs angular-material angular-directive
person Sagi    schedule 04.01.2016    source источник
comment
<md-content> создает прокручиваемые разделы, но похоже, что вы ищете кого-то, кто сделает это за вас....   -  person audiodude    schedule 04.01.2016
comment
Я знаю о md-контенте. Прочитайте документы, но, как я уже упоминал, у меня возникают проблемы, когда вы пытаетесь объединить это с директивами пользовательского тега. После полдня на это, я предпочитаю обращаться за помощью. Спасибо.   -  person Sagi    schedule 05.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

В конце концов мне удалось решить эту проблему, используя этот обходной путь. Кажется, у md-content есть проблемы с вертикальной растяжкой в ​​макете столбца.

Еще один важный момент, на который следует обратить внимание, — убедиться, что макет определен для всех элементов в соответствующей иерархии, начиная с тела.

Надеюсь, это поможет кому-то еще.

person Sagi    schedule 05.01.2016