UI виджет JavaScript Layout

Виджет Webix Layout определяет положение других компонентов на странице. Благодаря Layout, вы можете разделять страницу на ряды и колонки и помещать в них виджеты. Вы также можете создавать гибкие границы, которые можно перетаскивать, изменяя таким образом размеры компонентов.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Поддерживается во всех современных браузерах
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Обзор

Панели Layout автоматически подстраивают размеры под те виджеты, что в них помещаются. Вы можете легко помещать в Layout JavaScript Table, Tree, Menu и другие UI виджеты.

Несколько уровней Layout

Любой ряд этого JavaScript виджета может включать несколько колонок, каждая из которых может включать несколько рядов. Вы можете встраивать один Layout в другой.

Изменение размеров компонентов внутри Layout

Вы можете легко изменять размер ячеек Layout, передвигая границы с ресайзерами.

Адаптивность

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

Установка границ

Вы можете устанавливать границы, поля и отступы колонок, рядов и блоков внутри JavaScript Layout.

AbsoluteLayout

По умолчанию, при создании сетки для компонентов приложения с Webix, вы должны определить ряды и колонки. AbsoluteLayout - это альтернатива такому подходу. Этот виджет позволяет указывать точные размеры и положение каждого компонента внутри сетки.

DataLayout

DataLayout упрощает создание приложений со сложными структурами данных. Его отличительная черта - режим повторения (repeater mode). Он позволяет определять шаблоны для описания структуры каждого элемента данных в DataLayout, так что вам не нужно будет настраивать каждый виджет по-отдельности.

UI Spacer

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

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

Layouts as base for building UI structure

HTML Layouts with Webix

HTML Layouts with Webix

CSS on the Grid-iron: Grid Layouts

CSS on the Grid-iron: Grid Layouts