Адаптация документации под мобильные устройства

Блог
#1

Всем привет!

Перед нами стояла важная задача - сделать документацию максимально удобной для чтения с мобильного телефона. Мы успешно справились с этой миссией и теперь готовы поделиться опытом.

Введение

Адаптацию приложения на Plex.Vue необходимо начинать с подключения хука useBreakpoint.


const { breakpoint } = useBreakpoint();

Данный хук позволяет реактивно отслеживать изменения разрешения экрана пользователя и производить различные манипуляции с компонентами.

Рассмотрим на примере ниже небольшой шаблон, который при маленьком разрешении будет отображать компонент MobilePage и DefaultPage на остальных разрешениях.


<template>

    <PlexContainer>

        <MobilePage v-if="['xs', 's'].includes(breakpoint)" />

        <DefaultPage v-else />

    </PlexContainer>

</template>

Адаптация меню

Открываем файл src\components\viewport.vue

Для начала создадим массив разрешений в которых хотим скрывать меню.


const mobileBreakpoints = ["xs", "s"];

Скроем основное меню приложения на мобильных устройствах.


<template #left v-if="!mobileBreakpoints.includes(breakpoint)">

    <MainMenu ... />

</template>

В основной тулбар приложения добавим кнопку открытия меню статей, с условием что оно будет отобраться только на мобильных устройствах. Кнопка будет включать/выключать видимость плавающего меню со списком статей.


const menuCollapsed = ref(false);



<PlexButton

    v-if="mobileBreakpoints.includes(breakpoint)"

    :icon-name="menuCollapsed ? 'menu' : 'cancel-m-outline'"

    icon-prefix="plex-system"

    ui="ghost"

    :handler="() => (menuCollapsed = !menuCollapsed)"

/>

Далее размеcтим меню для мобильных устройств в отдельном контейнере, на этом адаптация меню завершена


<PlexContainer v-if="mobileBreakpoints.includes(breakpoint)" :class="{ 'menu': true, 'menu-collapsed': menuCollapsed }">

    <MainMenu ... />

</PlexContainer>

Адаптация разделов статьи

Открываем файл src\components\guide.vue.

Снова создадим массив разрешений в которых хотим скрывать меню.


const mobileBreakpoints = ["xs", "s"];

Скроем основоное меню разделов на мобильных устройствах.


<template #right v-if="headersIsVisible && !mobileBreakpoints.includes(breakpoint)">

    <PlexTreeList ... />

</template>

Добавил новую плашку с кнопками открытия разделов и закрытия самой плашки. При открытии будем отображать дерево со статьями


<div

    v-if="headersIsVisible && mobileBreakpoints.includes(breakpoint)"

    :class="{ chapters: true, 'chapters-expanded': headersExpanded }"

>

    <PlexTreeList

        class="chapters-tree"

        :root="headersRoot"

        :rootVisible="false"

        dataIndex="text"

        :enableCellFocus="false"

        :selectionModel="{ type: 'row', allowDeselect: false, mode: 'single' }"

        @select="onTreeSelect"

    >

        <template #tbar><PlexTypography text="Разделы" type="heading-s" /></template>

    </PlexTreeList>

    <div class="chapters-btn">

        <PlexButton

            ui="ghost"

            icon-name="text-align-left-outline"

            icon-prefix="plex-system"

            size="l"

            v-show="!headersExpanded"

            :handler="() => (headersExpanded = true)"

        />

        <PlexButton

            ui="ghost"

            icon-name="cancel-m-outline"

            icon-prefix="plex-system"

            v-show="headersExpanded"

            size="l"

            :handler="() => (headersExpanded = false)"

        />

    </div>

</div>

Если у вас появились вопросы и комментарии, с удовольствием на них ответим!