ractive-ez-tabs
Version:
Ractive Ez UI Tabs
76 lines (63 loc) • 1.63 kB
HTML
<html>
<head>
<style>
#container {
width: 100%;
height: 100%;
padding: 1em;
}
</style>
</head>
<body>
<div id="container" class="container"></div>
<script type="text/ractive" id="template">
<EzTabs align="{{ orientation }}">
<EzTabLinks>
<EzTabLink>First</EzTabLink>
<EzTabLink>Second</EzTabLink>
<EzTabLink>Inner</EzTabLink>
<EzTabLink>Inner Dynamic</EzTabLink>
<EzTabLink disabled>Disabled</EzTabLink>
</EzTabLinks>
<EzTabPanes>
<EzTabPane>
<div>1</div>
<button on-click="@this.cycleOrientation(orientation)">
{{ orientation }}
</button>
</EzTabPane>
<EzTabPane>2</EzTabPane>
<EzTabPane>
<EzTabs>
<EzTabLinks>
<EzTabLink>A</EzTabLink>
<EzTabLink>B</EzTabLink>
</EzTabLinks>
<EzTabPanes>
<EzTabPane>A Content</EzTabPane>
<EzTabPane>B Content</EzTabPane>
</EzTabPanes>
</EzTabs>
</EzTabPane>
<EzTabPane>
<EzTabs>
<EzTabLinks>
{{#each tabs as tab }}
<EzTabLink>{{ tab.name }}</EzTabLink>
{{/each}}
</EzTabLinks>
<EzTabPanes>
{{#each tabs as tab }}
<EzTabPane>{{ tab.content }}</EzTabPane>
{{/each}}
</EzTabPanes>
</EZtabs>
</EzTabPane>
<EzTabPane>Disabled pane will be invisible</EzTabPane>
</EzTabPanes>
</EzTabs>
</script>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>