Есть несколько способов задать размеры для компонента:
Вы можете динамически менять размеры компонента после его инициализации.
Ширина и высота виджета должна задаваться в числах (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.