Неправильное отображение с помощью full-width-header-menu-footer использует angular-material

Question

В соответствии с официальным предоставить примеры: полная ширина, верхний колонтитул, меню, нижний колонтитул меню
[flex-sm="33"][flex-md="20"] Основной [flex] Нижний колонтитул просто используйте CSS как angular-material.css, но отображать неправильно!

Answer 1

Убедитесь, что вы используете последнюю версию, так как документы показывают только последние версии документов. Так что сейчас вы, вероятно, видите документы для 0.6.0rc1, в которых есть несколько изменений / переименований из 0.5.1, обратитесь к журналу изменений для исправлений.

Если вам нужен заголовок полной ширины с боковым меню и нижним колонтитулом, то здесь правильная разметка для 0.6.0rc1

<div layout="column" layout-fill>
    <div layout="row">
        <span>Your header</span>
    </div>
    <div layout="row" flex>
        <div layout="column" flex="33">
            Sidebar
        </div>
        <div flex="66">
            Main content
        </div>
    </div>
    <div layout="row">
        The footer!
    </div>
</div>

Это просто базовый макет, который вы, вероятно, замените заголовок md-tollbar и боковое меню с md-sidenav, Но это должно помочь вам в этом.

Также, если вы хотите использовать 0.5.1, все равно просто замените row с horizontal а также column с vertical