Есть несколько способов задать размеры для компонента:
Вы можете динамически менять размеры компонента после его инициализации.
Ширина и высота виджета должна задаваться в числах (number). Использование строки (string) является некорректным и приведёт к ошибке.
webix.ui({
id:"layout",
height:600,
width:700
});
Однако вы можете использовать стоку, указывая размер внутри свойства type (или его алиаса - item). Например, так:
{
view:"list",
type:{height:"auto"}
}
Фиксированные размеры задаются с помощью свойств width и height, которые можно применять как к компонентам и их элементам, так и ко всему лейауту.
Размеры для лейаута
webix.ui({
id:"layout",
height:600,
width:700,
rows:[
{template:"row 1",height:20},
{template:"row 2"},
{cols:[
{id:"a1", template:"column 1", width:150}
]}
]
}).show();
Related sample: Layout and Resizer
Когда вы задаёте фиксированные размеры компонентам в лейауте, необходимо помнить, что ряды и колонки внутри лейаута автоматически подстраиваются под вложенные компоненты.
У контролов есть свойства inputWidth и inputHeight, которые определяют размеры полей и ярлыков кнопок.
Размеры для кнопки
{
view:"button",
value:"Prev",
type:"prev",
width: 100,
inputWidth: 70,
height: 20
}
Более подробно о возможностях масштабирования контролов читайте в этом гайде.
Если вы хотите указать размеры для элементов компонента, добавьте свойства height и width в свойство компонента type.
Фиксированные размеры для Dataview и элементов
webix.ui({
view:"dataview",
width: 520, // для компонента
height: 270,
type:{
height: 90, // для элементов Dataview
width: 250
}
});
Related sample: Dataview Italic
При динамическом изменении размеров или в ситуациях, когда компонент инициализирован в лейауте хотя бы с одной перетаскиваемой границей, минимальные и максимальные размеры приходятся весьма кстати. За них отвечают следующие свойства:
minWidth и minHeight (number) - при изменении размеров компонент не может занимать меньше места, чем указано в свойствах. Компонент занимает всё свободное пространство, если оно доступно.
maxWidth и maxHeight (number) - при изменении размеров компонент не может занимать больше места, чем указано в свойствах. В то же время у компонента могут быть меньшие размеры и он может занимать меньше места.
По умолчанию все компоненты подстраиваются под размеры родительского HTML-контейнера.
Инлайн CSS
<div id="areaA" style="width: 320px, height: 400px"></div>
<script type="text/javascript" charset="utf-8"> webix.ui({
container: "areaA", // соответствует значению параметра ID у <div>
view:"list",
// конфигурация для списка
});
</script>
Автомасштабирование подстраивает компонент или его элементы под свободное пространство (родительский контейнер или тело документа). В случае нескольких компонентов или столбцов лейаута, каждый из них получит равное количество места на странице.
Хорошая практика для автомасштабирования компонента - задать ширине и высоте значение 0. У некоторые виджетов (например List или Chart) это значение выставлено по умолчанию. Размеры других виджетов могут отличаться.
Например, исходные значения ширины и высоты у Calendar - 260 и 250 соответственно. Код ниже показывает, как подогнать размеры календаря под свободное место:
{
view:"calendar",
width:0,
height:0
}
Если задать свойству autoheight значение true, высота рядов подстроится под их содержимое.
Как работает это свойство? Когда вы указываете autoheight темплейту, срабатывает автоматический подсчёт высоты содержимого (обычно, текста). Это высота и станет высотой темплейта и соответствующий ряд подстроится под этот параметр.
Autoheight для темплейта
rows:[
{ template:"html->my_box1", autoheight:true},
{ template:"Area 1"},
{ template:"html->my_box2", autoheight:true}
]
Related sample: Autosizing to Content
У некоторых компонентов также есть свойство autowidth.
Масштабирование элементов компонента под их содержимое зависит от самого компонента.
Ширину столбцов Datatable можно подогнать под их содержимое следующим образом:
Размеры для столбцов Datatable
columns:[
{ id:"rank", header:"", css:"rank", adjust:true },
// другие столбцы
]
Related sample: Adjusting Columns to the Content
Datatable row height can be automatically adjusted to the cell contents of the chosen column:
Datatable Row Autoheight
webix.ui({
view:"datatable", columns:[// datatable columns],
fixedRowHeight:false, rowLineHeight:25,
on:{
"onresize":webix.once(function(){
this.adjustRowHeight("title", true);
})
}
});
Related sample: Row Auto-Height
Внутри свойства type можно определить автоматический подсчёт высоты для элементов List. Свойство применяется ко всем элементам.
Авто-высота для каждого элемента списка
webix.ui({
view:"list",
width:250,
type:{
height:"auto"
}
});
Таким же образом можно задать автоматическое определение размеров элементам Dataview, однако высота и ширина подстроится под свободное место нежели под содержимое:
Авторазмеры для элементов Dataview
webix.ui({
view:"dataview",
width:250,
type:{
height:"auto",
width:"auto"
},
xCount:2, yCount:4
});
Related sample: Dataview: Autosizing Items to Available Space
Кроме того, ширину и высоту элементов Dataview можно подогнать к заранее заданным размерам HTML элементов в темплейте. Для этого существует свойство sizeToContent:
Размеры для элемента DataView
webix.ui({
view:"dataview",
template:"#title#<br/> Year: #year#, rank: #rank#",
sizeToContent:true
});
Обратите внимание, что даже если у каждого элемента компонента свой HTML элемент, размеры расчитываются один раз и после этого применяются. В то же время какие-то элементы могут оказаться меньше или больше остальных.
Related sample: DataView: Autosizing Items to Content
Webix предлагает полноэкранный режим для приложений, при котором они занимают весь экран мобильного устройства.
Полноэкранный режим включается с помощью метода webix.ui.fullScreen() перед инициализацией UI:
webix.ui.fullScreen();
webix.ui({
rows:[...]
});
Вы можете указать относительные размеры с помощью свойства {gravity:x}, которое делает компонент в x раз больше других.
Одна из кнопок 'Save' больше второй в два раза.
webix.ui({
view:"toolbar",
{ view:"button", value:"Load", width:200 },
{ margin:4, borderless:true, rows:[
{ view:"button", value:"Save", gravity:2 },
{ view:"button", value:"Save"}
// другие элементы
]}
});
Related sample: Toolbar: Multiple Rows
Динамическое изменение размеров обеспечивает корректное отображение компонентов вне зависимости от размеров экрана, а также делает их адаптивнми.
По умолчанию динамический размер включён для всех компонентов, у которых не указаны свои размеры и они не находятся HTML контейнере с указанными размерами. Такие компоненты занимают весь экран и при изменение размеров экрана подстраиваются под него.
Чтобы включить динамическое изменение размеров в других ситуациях, вам необходимо:
<div id="testA" style='width:50%; height:50%;'></div>
...
grid = webix.ui({
container:"testA",
view:"datatable",
// конфигурация datatable
});
webix.event(window, "resize", function(){ grid.adjust(); })
Обратите внимание, что события для HTML узлов добавляются с помощью метода event, а не attachEvent.