Panel Bar – New HTML5 Web Component

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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.

thumb

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:

HTML Attributes of the <acidjs-xpanel-drawer /> Tag

Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:

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.

Categories and Tags
Links

© 2006 - 2023 Martin Ivanov