Сбалансированный дизайн пользовательского интерфейса является обязательным и должен быть достигнут при разработке пользовательского интерфейса. Важно, чтобы информация размещалась в правильном месте. Для этого разработчик должен использовать панели для организации пользовательского интерфейса, и этого легко добиться с помощью компонента Splitter. С помощью компонента разделителя jQWidgets очень легко добиться вертикального, горизонтального и вложенного разделения на вашей веб-странице.
Компонент Splitter для Vue - это подвижная панель, которая разделяет страницу или контейнер на изменяемые и складываемые панели. Мы рассмотрим, как добавить разделитель jQWidgets для фреймворка Vue и его функций.
Интеграция:
Вам нужен node.js v = ›8 для установки Vue CLI. Проверьте версию узла по узлу –v, иначе вы можете обновить версию узла с помощью npm install npm @ latest –g.
Чтобы установить Vue CLI,
Чтобы создать проект Vue с использованием интерфейса командной строки, введите команду ниже в интерфейсе командной строки Vue; позже установите jQWidgets с помощью npm.
Это запустит создание проекта, который затем предоставит возможность выбрать предустановку по умолчанию или вручную выбрать функции. Выберите функции для проекта вручную. После создания проекта вы можете запустить его с помощью npm.
Ваш проект будет работать на localhost: 8080.
Структура папок проекта Vue:
После создания проекта у вас будет структура проекта, как показано ниже.
Вы можете получить конфигурацию файла package.json из исходного кода ниже. Все необходимые модули включены.
После того, как package.json будет готов, введите npm install в интерфейсе командной строки.
Работа с вложенными разделителями:
Чтобы создать макет страницы с использованием вложенных разделителей jQWidgets в вашем приложении Vue, вам необходимо импортировать компонент Splitter для Vue в файл App.vue.
Добавьте JqxSplitter в раздел компонентов App.vue.
App.vue содержит ‹template /› структурный тег, который определяет структуру приложения. Теперь установите тег для нового компонента ‹JqxSplitter›. Этот тег может быть изменен в зависимости от требуемых панелей. Ниже приводится базовое определение тега ‹template /›.
Чтобы продемонстрировать создание панелей, в теге будет несколько панелей. Во-первых, установите основной разделитель в горизонтальной ориентации, задав размер панели 50%. Это разделит площадь на две равные части по горизонтали.
Теперь добавьте вертикальный и горизонтальный разделители.
Создайте еще один разделитель, который разделит панель по горизонтали. Для создания вложенных разделителей в панели используйте класс «jqx-splitter-nested».
Ниже приведен весь код для добавления разделителей и вложенных разделителей.
Теперь, чтобы установить свойства компонента ‹JqxSplitter /›, измените член данных файла App.vue. Такие свойства, как ширина, высота, размер панели, устанавливаются и добавляются в возвращаемый объект данных.
Ниже приведен пример jqxsplitter во фреймворке Vue. Различные панели создаются в соответствии с ориентацией и размером панели, определенными в структурном теге ‹template /›.
Стильные сплиттеры:
Разделители используются для создания макетов в шаблонах. jqSplitters использует пару файлов CSS jqx.base.css, которые используются для создания макета виджета, такого как поля, отступы, ширина границы, положение и т. д., и jqx. [название темы] .css для применения цветов и фона виджетов. Включите jqx.base.css перед файлом jqx. [Тема].
Возможности:
Разделители являются неотъемлемой частью макета страницы. Он помогает разделить область и может настраиваться пользователем. В этой статье мы уже видели вложенные сплиттеры. Теперь мы рассмотрим некоторые его особенности.
- Интеграция с вкладками, деревом и сеткой:
Панели легко интегрируются с вкладками и деревом. Мы можем добавить jqxTabs в один из разделителей, как показано ниже.
Точно так же мы можем интегрировать компоненты jqxGrid и jqxTree с jqxSplitters.
2) Сворачивающиеся разделители:
jqxSplitter можно использовать для свертывания одной из панелей. В случае вертикального разделителя верхняя панель или в случае горизонтальной панели левая панель будет свернута. Чтобы панель могла сворачиваться, нам нужно отметить разделение панелей классом splitter-panel для панелей.
Установив свойство «collapsible: false», мы можем избежать скрытия или сворачивания панели.
3) Несколько разделенных панелей с вкладками:
Мы можем иметь несколько или вложенных разделителей, интегрированных с несколькими вкладками. Эти макеты полезны, когда отображаемые данные взаимосвязаны и для отображения деталей выбранных данных одной вкладки на другой панели или вкладке, например при отображении ленты новостей. Эти сплиттеры бывают разборными и передвижными.
4) Размер жидкости:
У нас может быть несколько вариантов макета разделителя, где мы можем создать горизонтальный и вертикальный макет с вложенными разделителями. Они могут быть складными с возможностью перемещения разделителей влево, вправо, вверх и вниз. Эти разделители могут быть интегрированы с любым другим jqxWidget, таким как вкладки, сетки или дерево.
Резюме:
Разделители jQWidgets для Vue в основном используются для разработки макетов страниц. Его можно легко интегрировать и гибко использовать во время выполнения. В нем есть несколько вариантов разделения страницы на несколько панелей. Вы можете иметь вложенные панели с интегрированными вкладками, деревом и сеткой. Эти сплиттеры достаточно гибкие, чтобы их можно было сложить, когда панель не нужна. С этими вариантами гибкого размера вы можете иметь несколько вариантов и комбинаций для дизайна вашей веб-страницы.
