oda-framework
Version:
36 lines (35 loc) • 1.3 kB
HTML
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>oda-tabs</title>
</head>
<body>
<div style="max-width: 200px;max-height: 200px;overflow: hidden;" class="flex vertical">
left<oda-tabs id="tabsL" content-align="left"></oda-tabs>
</div>
<div style="max-height: 200px;max-height: 200px;overflow: hidden;" class="flex horizontal">
top<oda-tabs id="tabsT" content-align="top"></oda-tabs>
</div>
<div style="max-width: 200px;max-height: 200px;overflow: hidden;" class="flex vertical">
right<oda-tabs id="tabsR" content-align="right"></oda-tabs>
</div>
<div style="max-height: 200px;max-height: 200px;overflow: hidden;" class="flex horizontal">
bottom<oda-tabs id="tabsD" content-align="bottom"></oda-tabs>
</div>
<script type="module">
import '../../../../oda/oda.js';
import './tabs.js';
const items = Array.from({length: 100}).map((_, i) => ({label: i}));
tabsL.index = 50;
tabsT.index = 50;
tabsR.index = 50;
tabsD.index = 50;
tabsL.items = items;
tabsT.items = items;
tabsR.items = items;
tabsD.items = items;
</script>
</body>
</html>