Panel Bar – New HTML5 Web Component

The latest addition to my constantly growing collection of HTML5 Web Components has just been released. X-Panel is a HTML5 Web Component, built on top of Mozilla’s X-Tags which makes possible the creation of full-featured panel bars and drawers fun and without any JavaScript as custom tags.

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.