X-Tag Web Components
- Tab Wigets
- Sliding Panels (think slideshows)
- Flipping Panels (think mobile apps)
- Modal Dialogs
There are even a few advanced components like:
Each piece of these components is completely styleable, allowing for the most flexible components possible. Let's have a quick look at how these components are created!
Using X-Tag Components
<!-- create an accordion --> <h3>Accordion</h3> <x-accordion id="accordion"> <x-toggler selected="true">Toggler 1</x-toggler> <div> This is the content. </div> <x-toggler>Toggler 2</x-toggler> <div> This is the content 2. </div> <x-toggler>Toggler 3</x-toggler> <div> This is the content 2. </div> </x-accordion> <!-- create a tab box --> <h3>TabBox</h3> <x-tabbox id="tabbox"> <x-tabs> <x-tab selected="true">Tab 1</x-tab> <x-tab>Tab 2</x-tab> <x-tab>Tab 3</x-tab> </x-tabs> <x-tabpanels> <x-tabpanel selected="true"> <p> This is tab content 1 </p> </x-tabpanel> <x-tabpanel> <p> This is tab content 2 </p> </x-tabpanel> <x-tabpanel> <p> This is tab content 3 </p> </x-tabpanel> </x-tabpanels> </x-tabbox> <!-- create a map --> <x-map data-key="Cloudmade/OpenStreetMaps-API-Key"></x-map>
X-Tag supports all A-grade browsers. IE9 and Opera support is almost complete, IE8 support will be following shortly.
What Do You Think?
I love the X-Tag library. Simple, effective, customizable. There are many libraries which accomplish the components of X-Tag, but this approach is much simpler, and (hopefully) a step toward native support. I wouldn't mind seeing a sibling theme library though. What do you think of X-Tag? Have any ideas for more components that should live within X-Tag?