Flags of the World

Multipurpose HTML5 Web Component for displaying flags from the datasets of geonames.org wrapped in a custom tag:

<acidjs-xflag code="cz"></acidjs-xflag>

<acidjs-xflag code="bg" size="small"></acidjs-xflag>

<acidjs-xflag code="mt" size="medium"></acidjs-xflag>

<acidjs-xflag code="de" size="large"></acidjs-xflag>

Demo

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XFlag/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XFlag/classes/XFlag.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            
            <acidjs-xflag code="bg" size="small"></acidjs-xflag>
            <acidjs-xflag code="bg" size="medium"></acidjs-xflag>
            <acidjs-xflag code="bg" size="large"></acidjs-xflag>
            
            <acidjs-xflag code="de" size="small"></acidjs-xflag>
            <acidjs-xflag code="de" size="medium"></acidjs-xflag>
            <acidjs-xflag code="de" size="large"></acidjs-xflag>
            
            <acidjs-xflag code="uk" size="small"></acidjs-xflag>
            <acidjs-xflag code="uk" size="medium"></acidjs-xflag>
            <acidjs-xflag code="uk" size="large"></acidjs-xflag>
            
            <br />
            
            <acidjs-xflag code="cz" size="small"></acidjs-xflag>
            <acidjs-xflag code="cz" size="medium"></acidjs-xflag>
            <acidjs-xflag code="cz" size="large"></acidjs-xflag>
            
            <acidjs-xflag code="mt" size="small"></acidjs-xflag>
            <acidjs-xflag code="mt" size="medium"></acidjs-xflag>
            <acidjs-xflag code="mt" size="large"></acidjs-xflag>
            
            <acidjs-xflag code="au" size="small"></acidjs-xflag>
            <acidjs-xflag code="au" size="medium"></acidjs-xflag>
            <acidjs-xflag code="au" size="large"></acidjs-xflag>
            
            <br />
            
            <acidjs-xflag code="us" size="small"></acidjs-xflag>
            <acidjs-xflag code="us" size="medium"></acidjs-xflag>
            <acidjs-xflag code="us" size="large"></acidjs-xflag>
            
            <acidjs-xflag code="ca" size="small"></acidjs-xflag>
            <acidjs-xflag code="ca" size="medium"></acidjs-xflag>
            <acidjs-xflag code="ca" size="large"></acidjs-xflag>
            
            <acidjs-xflag code="es" size="small"></acidjs-xflag>
            <acidjs-xflag code="es" size="medium"></acidjs-xflag>
            <acidjs-xflag code="es" size="large"></acidjs-xflag>

/*
 * X-Flag HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

acidjs-xflag
{
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

acidjs-xflag
{
    margin: .5em;
}

acidjs-xflag img
{
    display: block;
}

acidjs-xflag img
{
    width: 100%;
}

acidjs-xflag[size="large"] img
{
    max-width: 200px;
}

acidjs-xflag[size="medium"] img
{
    max-width: 40px;
}

acidjs-xflag[size="small"] img
{
    max-width: 20px;
}