UNPKG

oda-framework

Version:

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

27 lines (20 loc) 2.17 kB
Компонент «**List**» предназначен для отображения маркированного или нумерованного списка, в котором можно выбрать только один элемент. Для использования этого компонента необходимо подключить модуль «**list.js**» и добавить в HTML-код пользовательский тэг \<**oda-list**>. Например: ```javascript _run_line_edit_loadoda_[my-component.js]_h=100_ import '/components/grids/list/list.js'; ODA({ is: 'my-component', template: ` <oda-list :items marker="circle"></oda-list> `, props: { items: ["Элемент 1", "Элемент 2", "Элемент 3", "Элемент 4", "Элемент 5"] } }); ``` Список отображаемых в этом компоненте элементов хранится в свойстве **items**. Это свойство представляет собой обычный массив, элементы которого по умолчанию отображаются в виде маркированного списка с помощью HTML-элемента **ul**. Вид маркера устанавливается в свойстве **marker**, и по умолчанию равен значению **none**. В данном примере свойство **items** компонента **my-component** связывается с одноименным свойством компонента **list**, используя директиву биндинга двоеточие (**:**). Поэтому элементы массива отображаются компонентом в виде маркированного списка с маркером, заданным в форме окружности. ``` info_md Обратите внимание, с помощью данного компонента из списка можно выбрать только один элемент, даже удерживая зажатой клавишу **Shift**. ```