Beginner

Размеры компонентов

Есть несколько способов задать размеры для компонента:

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

Как указать корректные значения

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

Автомасштабирование

1. Автоподстраивание под размеры родительского контейнера

По умолчанию все компоненты подстраиваются под размеры родительского 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>

Автомасштабирование подстраивает компонент или его элементы под свободное пространство (родительский контейнер или тело документа). В случае нескольких компонентов или столбцов лейаута, каждый из них получит равное количество места на странице.

2.Значение "0" при автомасштабировании

Хорошая практика для автомасштабирования компонента - задать ширине и высоте значение 0. У некоторые виджетов (например List или Chart) это значение выставлено по умолчанию. Размеры других виджетов могут отличаться.

Например, исходные значения ширины и высоты у Calendar - 260 и 250 соответственно. Код ниже показывает, как подогнать размеры календаря под свободное место:

{ 
    view:"calendar", 
    width:0, 
    height:0 
}

3. Подгоняем размеры под содержимое

Если задать свойству 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.

4. Подгоняем размеры элементов под их содержимое

Масштабирование элементов компонента под их содержимое зависит от самого компонента.

Ширину столбцов 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 и указать ему относительные размеры;
  • поместить Webix компонент внутрь этого div (задать компоненту свойство container);
  • убедитесь, что компонент подстраивается под размеры своего контейнера при изменении размеров окна бразуера.
<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.

Статьи по теме:

Наверх