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.

59 lines (57 loc) 3.41 kB
<meta charset="utf-8"> <oda-tester> <oda-layout-designer id="layout" data-keys="fields" design-mode></oda-layout-designer> </oda-tester> <script type="module"> import '../../../oda.js'; import './layout-designer.js'; layout.data = { id: 'test-layout-designer', fields: [ { name: 1, labelPosition: 'top', style: { 'background-color': 'lightyellow' } }, { name: 2, fields: [{ name: '2.1' }, { name: '2.2' }, { name: '2.3' }, { name: '2.4' }, { name: '2.5' }, { name: '2.6' }] }, { name: 3, template: 'oda-oda-button', props: { icon: 'icons:warning' } }, { name: 4 }, { name: 5 }, { name: 6, }, { name: 7, }, { name: 8 }, { name: 9 }, { name: 10 }, { name: 11 }, { name: 12, fields: [{ name: '12.1' }, { name: '12.2' }, { name: '12.3' }, { name: '12.4' }, { name: '12.5' }, { name: '12.6' }] }, { name: 13 }, { name: 14, fields: [ { name: '14.1' }, { name: '14.2', fields: [ { name: '14.2.1', fields: [ { name: '14.2.1.1', fields: [{ name: '14.2.1.1.1' }, { name: '14.2.1.1.2' }] }, { name: '14.2.1.2', fields: [{ name: '14.2.1.2.1' }, { name: '14.2.1.2.2' }] }, { name: '14.2.1.3' }, { name: '14.2.1.4', fields: [{ name: '14.2.1.4.1' }, { name: '14.2.1.4.2', fields: [{ name: '14.2.1.4.2.1' }, { name: '14.2.1.4.2.2' }, { name: '14.2.1.4.2.3' }, { name: '14.2.1.4.2.4' }] }] }, { name: '14.2.1.5' }, ] }, { name: '14.2.2' }, { name: '14.2.3' }, { name: '14.2.4' }, { name: '14.2.5' }], }, { name: '14.3' }, { name: '14.4' }, { name: '14.5' },], }, { name: 15 }, { name: 16 }, { name: 17 }, { name: 18 }, { name: 19 }, { name: 20 }, ] } layout.settings = {"ROOT":{"actions":[{"action":"group","context":4,"params":{"items":[4],"align":""}},{"action":"addTab","context":"group1"},{"action":"addTab","context":"group1"},{"action":"addItems","context":"tab2","params":{"items":[7]}}],"items":[null,{"label":"143563464356"},{"hidden":true},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]},"ROOT/12":{"actions":[{"action":"group","context":"12.1","params":{"items":["12.1"],"align":""}},{"action":"addTab","context":"group2"},{"action":"addTab","context":"group2"},{"action":"addTab","context":"group2"},{"action":"addTab","context":"group2"}],"items":[]},"ROOT/14/14.2/14.2.1/14.2.1.1":{"actions":[{"action":"group","context":"14.2.1.1.1","params":{"items":["14.2.1.1.1"],"align":""}},{"action":"addTab","context":"group3"},{"action":"addTab","context":"group3"},{"action":"addItems","context":"tab8","params":{"items":["14.2.1.1.2"]}}]}} </script>