The Markup
[sourcecode language=”html”]
<acidjs-xpanel multiple>
<acidjs-xpanel-drawer icon="icons/pdf.png" label="PDF Files" open>
Drawer content…
</acidjs-xpanel-drawer>
<acidjs-xpanel-drawer icon="icons/doc.png" label="MS Word Documents">
Drawer content…
</acidjs-xpanel-drawer>
<acidjs-xpanel-drawer icon="icons/xls.png" label="MS Excel Sheets">
Drawer content…
</acidjs-xpanel-drawer>
<acidjs-xpanel-drawer icon="icons/txt.png" label="Text Files">
Drawer content…
</acidjs-xpanel-drawer>
</acidjs-xpanel>
[/sourcecode]
HTML Attributes of the <acidjs-xpanel />
Tag
Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:
multiple
– If attribute is set, multiple open drawers will be enabled. By default, expanding a drawer collapses other expanded drawers.width
– Width of the drawer. The default width is "100%"
.height
– Height of the drawer. The default height is "auto"
.HTML Attributes of the <acidjs-xpanel-drawer />
Tag
Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:
icon
– URL to an optional drawer icon.label
– Drawer label text.height
– Optional height of the drawer. If the content exceeds the height
specified, scrollbars will appear.hint
– Optional hint text for the drawer header.open
– By default all drawers are closed. Setting the open
attribute will render that drawer open by default.Check the code of the demo page or the distribution to see how to use X-Panel and have a great weekend!
If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.
© 2006 - 2023 Martin Ivanov