oda-framework
Version:
64 lines (61 loc) • 2.48 kB
HTML
<meta charset="UTF-8">
<style>
body{
overflow: hidden;
}
</style>
<oda-dropdown-tester></oda-dropdown-tester>
<script type="module">
import '../../../oda.js';
import "../containers.js";
ODA({is:'oda-dropdown-tester',
template:`
<style>
:host{
@apply --vertical;
@apply --flex;
}
</style>
<label>Use parent width</label>
<input type="checkbox" ::checked="useParentWidth">
<div class="flex horizontal">
<div ~for="type" class="flex vertical shadow" style="margin: 12px; border: 1px solid transparent; border-radius: 4px; align-items: center;">
<h3>{{$for.item}}</h3>
<div class="flex vertical" style=" justify-content: space-around;">
<button ~for="modes" style="width: 100px; margin: 20px;" @tap="run($event, $for.item, $$for.item)">{{Object.values($$for.item)}}</button>
</div>
</div>
</div>
`,
useParentWidth: false,
type: ['No parent', 'Parent', 'Parent + intersect'],
modes: [{align: 'left', drop: 'up'}, {align: 'left', drop: 'down'}, {align: 'right', drop: 'up'}, {align: 'right', drop: 'down'}],
async run(e, type, align){
try {
const res = await ODA.showDropdown('oda-test', { icon: 'icons:warning', iconSize: 100},
{useParentWidth: this.useParentWidth, animation: 500, parent: type.startsWith('Parent')?e.target:null, intersect: type.includes('intersect') ,
align: align.align, drop: align.drop, title: type+` (${Object.values(align)})`, icon: 'icons:info'});
console.log(res);
}
catch (e) {
// console.error(e);
}
}
})
ODA({is: 'oda-test', imports: '@oda/button',
template:`
<style>
:host{
@apply --vertical;
align-items: center;
}
</style>
<oda-button :icon-size :icon></oda-button>
<div class="vertical" style="overflow: auto">
<h4 ~for="5">Запись № {{$for.item}}</h4>
</div>
`,
iconSize: 24,
icon: ''
})
</script>