oda-framework
Version:
38 lines (30 loc) • 2.63 kB
Markdown
Свойство **iconSize** предназначено для указания размера иконки, отображаемой с левой стороны от элемента списка.
По умолчанию размер иконки установлен в значение **24px**. Однако сама иконка появляется только тогда, когда элемент списка является объектом, у которого в свойстве **icon** указана ссылка на соответствующую иконку.
Например:
```javascript _run_line_edit_loadoda_[my-component.js]_h=120_
import '/components/grids/listbox/listbox.js';
ODA({
is: 'my-component',
template: `
<label> Размер иконки: <input type="number" min="0" max="100" @change="onChangeSize" value='24'>px</label>
<oda-list-box :items :iconSize></oda-list-box>
`,
props: {
items: [
{label: "Элемент 1", icon: 'icons:favorite'},
{label: "Элемент 2", icon: 'icons:face'},
{name: "Элемент 3", icon: 'icons:star'},
],
iconSize: '24px'
},
onChangeSize(e) {
this.iconSize = e.target.value + 'px';
}
});
```
Как видно из примера, изменение свойства **iconSize** не приводит к изменению размера иконки. По умолчанию он определяется высотой строкового элемента **span**, который используется и для вывода иконки и для вывода надписи с правой стороны от нее.
``` info_md
Обратите внимание, что значения элементов списка выводятся только при условии, что объект является прямым наследником класса **Object** и имеет свойство **label**.
```
В противном случае значение элемента отобразиться в виде стандартного строкового представления пользовательского объекта **[object Object]**, как для третьего элемента в этом примере.
Однако можно задать пользовательский вывод и иконки и значения элементов, как показано в примере **«Пользовательский список»** на вкладке **«Примеры»**.