ractive-ez-accordion
Version:
Ractive Ez UI Accordion
73 lines (64 loc) • 1.96 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">
<EzAccordion>
<EzAccordionItem>
<EzAccordionLink>Item 1</EzAccordionLink>
<EzAccordionPane>Content 1</EzAccordionPane>
</EzAccordionItem>
<EzAccordionItem>
<EzAccordionLink>Item 2</EzAccordionLink>
<EzAccordionPane>Content 2</EzAccordionPane>
</EzAccordionItem>
<EzAccordionItem>
<EzAccordionLink disabled>Item Disabled</EzAccordionLink>
<EzAccordionPane>Content Disabled</EzAccordionPane>
</EzAccordionItem>
<EzAccordionItem>
<EzAccordionLink>Item Inner</EzAccordionLink>
<EzAccordionPane>
<EzAccordion multiple>
<EzAccordionItem>
<EzAccordionLink>Many A</EzAccordionLink>
<EzAccordionPane>Content A</EzAccordionPane>
</EzAccordionItem>
<EzAccordionItem>
<EzAccordionLink>Many B</EzAccordionLink>
<EzAccordionPane>Content B</EzAccordionPane>
</EzAccordionItem>
<EzAccordionItem>
<EzAccordionLink>Many C</EzAccordionLink>
<EzAccordionPane>Content C</EzAccordionPane>
</EzAccordionItem>
</EzAccordion>
</EzAccordionPane>
</EzAccordionItem>
<EzAccordionItem>
<EzAccordionLink>Item Dynamic</EzAccordionLink>
<EzAccordionPane>
<EzAccordion>
{{#each panes as pane }}
<EzAccordionItem>
<EzAccordionLink>{{ pane.name }}</EzAccordionLink>
<EzAccordionPane>{{ pane.content }}</EzAccordionPane>
</EzAccordionItem>
{{/each}}
</EzAccordion>
</EzAccordionPane>
</EzAccordionItem>
</EzAccordion>
</script>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>