Может ли NavMenu быть отзывчивым в element-ui?

Я пытаюсь создать адаптивный SPA на основе компонентов vue.js и element-ui. Он имеет адаптивный макет из коробки и работает нормально, но я не могу понять, как сделать так, чтобы компонент NavMenu (el-menu) перемещался вверх или скрывался под «бургером» на мобильных устройствах.
Актуально. Результатом является просто вертикальное меню над контентом, поэтому вам нужно немного прокрутить вниз.
Мой макет app.vue:

<el-row>
    <el-col>
        <el-row type="flex" justify="space-between" align="middle">
            <el-col :span="6">
                <img src="/Assets/images/logo.png" width="64px" align="left" />
                <h2>Admin</h2>
            </el-col>
            <el-col :span="2">
                <sign-in></sign-in>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :xs="3" :lg="8" :xl="3">
                <el-menu v-if="user.authenticated" style="min-height: 960px; background-color: #fff" v-bind:router="true">
                    <el-menu-item index="/offers">
                        <i class="el-icon-star-off"></i>
                        <span>Offers</span>
                    </el-menu-item>
                    ...
                </el-menu>
            </el-col>
            <el-col :xs="21" :lg="16" :xl="21">
                <router-view style="width:100%;"></router-view>
            </el-col>
        </el-row>
    </el-col>
</el-row>

person IDeveloper    schedule 17.01.2018    source источник


Ответы (1)


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

Если вы планируете создать адаптивное навигационное меню, вам нужно реализовать его для себя, чтобы достичь своих целей.

Чтобы сделать жизнь людей немного удобнее, я создал простой адаптивный шаблон меню с помощью Element пару дней назад.

Надеюсь, это поможет вам, чтобы получить некоторые идеи.

person JeffMinsungKim    schedule 12.04.2018
comment
Спасибо за идею, попробую! - person IDeveloper; 16.04.2018