Представляем Protovue — инструмент прототипирования компонентов для Vue.js

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

От автора: при прототипировании новых интерактивных элементов для приложения часто полезно разметить структуру макета, чтобы показать, как эти фрагменты складываются вместе. С этим подходом связано несколько проблем.

 

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

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

Имея это в виду, v1Labs недавно запустил новый фреймворк компонентов с открытым исходным кодом под названием Protovue. Он предназначен для того, чтобы предоставить дизайнерам и разработчикам инструмент для сборки абстрактного макета, позволяющего создавать прототипы всего за 5 минут.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Функциональная альфа-версия доступна уже сегодня. Я покажу вам, как прототипировать во Vue js компоненты и создать следующий макет. Полный код размещен на Codesandbox.io.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Установка Protovue

Если вы используете CodeSandbox, просто добавьте v1labs-protovue в качестве зависимости. Чтобы добавить к локальному приложению Vue.js выполните:

$ npm install v1labs-protovue --save
# или
$ yarn add v1labs-protovue

Затем добавьте Protovue в качестве плагина при инициализации Vue.

import Vue from "vue";
import Protovue from "v1labs-protovue";
Vue.use(Protovue);
new Vue({});

Настройка сетки

По умолчанию сетки рассчитаны на 100% ширины, 100% высоты. Это хорошая идея добавить сетку в качестве первого элемента v-app.

<v-app>
  <v1-grid guides size="12x10" gap="10">
  </v1-grid>
</v1-grid>

Вышеуказанная сетка состоит из 12 столбцов и 10 строк с зазором в 10 пикселей между ячейками. Также обратите внимание на атрибут guides. Он отображает сетку из синих линий, чтобы помочь вам в размещении ячеек. Вы можете удалить его, когда разместите все ячейки.

Сетка с направляющими должна выглядеть так.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Добавление ячеек

Сначала добавим ячейку для навигации.

<v1-cell size="12x1" />

В этом случае мы просто хотим, чтобы ячейка охватывала 12 столбцов и 1 строку. Это должно выглядеть так.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Теперь для левой боковой панели.

<v1-cell size="3x9" y="1" />

Эта ячейка 3×9 имеет атрибут y=»1″, который смещает ячейку на 1 строку сверху.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Правая боковая панель очень похожа на левую.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее
<v1-cell size="2x9" y="1" x="10" />

Мы разместили ее в 1 столбец и сместили на 10 столбцов слева.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Пока все понятно? Теперь добавим ячейку основного контента и ячейку футера.

<v1-cell size="7x8" y="1" x="3" />
<v1-cell size="7x1" y="9" x="3" />

Теперь мы разместили все ячейки, и можно удалить атрибут guides из <v1-grid>. На текущий момент вы должны получить следующее.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Добавление условной навигации

В первой ячейке добавьте элемент <v1-nav />.

<v1-cell size="12x1">
  <v1-nav />
</v1-cell>

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Содержимое левой боковой панели

<v1-cell size="3x9" y="1">
  <v1-image center round width="70px" height="70px" />
  <v1-text center rows="3" />
  <v1-avatar count="6" />
</v1-cell>

Для элемента изображения задано centered, round и 70×70.

Для текста задано centered и 3 строки.

Элемент аватара повторяется 6 раз.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Содержимое правой боковой панели

<v1-cell middle size="2x9" y="1" x="10">
  <v1-image center round width="100px" height="100px" />
  <v1-text center rows="7" />
</v1-cell>

Подобно содержимого элементам левой боковой панели. Обратите внимание, что добавление middle для ячейки вертикально центрирует контент.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Футер

<v1-cell size="7x1" y="9" x="3">
  <v1-footer />
</v1-cell>

Достаточно легко. Просто добавьте элемент <v1-footer />.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Мы готовы начать прототипирование

Для того, чтобы поднять ваше приложение, требуется всего несколько строк кода.

<v1-grid size="12x10" gap="10">
  <v1-cell size="12x1">
 <v1-nav />
  </v1-cell>
  <v1-cell size="3x9" y="1">
 <v1-image center round width="70px" height="70px" />
 <v1-text center rows="3" />
 <v1-avatar count="6" />
  </v1-cell>
  <v1-cell middle size="2x9" y="1" x="10">
 <v1-image center round width="100px" height="100px" />
 <v1-text center rows="7" />
  </v1-cell>
  <v1-cell middle size="7x8" y="1" x="3">
 <!-- PROTOTYPE GOES HERE -->
  </v1-cell>
  <v1-cell size="7x1" y="9" x="3">
 <v1-footer />
  </v1-cell>
</v1-grid>

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Автор: Dane Lyons

Источник: https://hackernoon.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Фреймворк VUE JS

VUE JS - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree