Flags (Drapeaux)

Ce composant permet d’afficher 214 drapeaux officiels, les 197 pays reconnus par l’ONU à l’écriture de ces lignes, plus certains pays non reconnus (Taïwan, l’Angleterre, l’Écosse et le Pays de Galles…) ou liés à des groupes sportifs (équipe olympique des refugiés, athlètes individuels neutres). Ceux-ci sont téléchargeables en tant que ressources graphiques dans la partie icônes des Ressources. Il s’agit de fichiers vectoriels, il est donc possible de les afficher à n’importe quelle taille sans perte de qualité. Il faut toutefois savoir que la complexité de certains drapeaux leur confère un poids anormalement élevé pour un fichier SVG (le plus lourd, celui du Salvador, faisant 360ko !).

Usage

• Ces drapeaux serviront le plus souvent dans un contexte sportif, c’est pourquoi ils incluent l’Angleterre, l’Écosse et le Pays de Galles, « pays » sportifs…
• Ils sont par défaut affichés dans une taille de 24 x 16px, mais comme il s’agit de drapeaux vectoriels, ils pourront être agrandis à n’importe quelle taille.

Style & code

Base

Pour afficher un drapeau, il faut utiliser une classe su-flag-xx, où « xx » correspond au code ISO 3166-1 alpha-2 en deux lettres pour les 197 pays reconnus par l’ONU. Pour les pays non reconnus mais présents dans la norme ISO 3166-1, on utilise ce même code alpha-2. Étant donné que les 3 pays du Royaume-Uni ainsi que certains pays non reconnus par l’ONU n’ont pas de référence dans cette norme, le choix de cette valeur de « xx » a été fait arbitrairement. Il en va de même pour les 2 équipes olympiques hors pays. Leur identifiant est aussi passé à 3 caractères pour marquer leur différence avec les autres :

• eng pour l’Angleterre (England),
• cym pour le Pays-de-Galles (Cymru),
• sco pour l’Écosse (Scotland).
• kos pour le Kosovo.
• tac pour Taipei Chinois.
• ain pour les Athlètes Individuels Neutres.
• eor pour l’Équipe Olympique des Réfugiés.

Voir ci-dessous pour le catalogue complet des classes par pays.

Pour des raisons d’accessibilité, on ajoutera le nom du pays dans l'élément qui porte la classe. Ce texte est masqué par le CSS.

<span class="su-flag-fr">France</span>

Changement de taille

SipaUI ne propose qu’une taille de drapeau (24 x 16px), adaptée à la plupart des cas où il faut afficher un drapeaux comme une icône. Mais vous pouvez changer leur taille comme bon vous semble avec vos propres CSS en agissant sur le width.

Ci-dessous, la taille standard (largeur 24px), suivie de 3 plus grandes (75px, 200px et 500px).

<span class="su-flag-ni">Nicaragua</span>
<span class="su-flag-ni" style="width:75px">Nicaragua</span>
<span class="su-flag-ni" style="width:200px">Nicaragua</span>
<span class="su-flag-ni" style="width:500px">Nicaragua</span>

Suppression de la bordure

Par défaut, SipaUI ajoute une bordure aux drapeaux, afin d’éviter qu’ils ne se fondent dans la page (drapeau du Japon sur une page blanche p. ex.). Pour la supprimer, ajouter la classe su-no-border.

<span class="su-flag-jp">Japon</span>
<span class="su-flag-jp su-no-border">Japon</span>

Catalogue des drapeaux

Catalogue de tous les drapeaux classés par ordre alphabétique du nom de leur pays en français. Ils sont présentés dans leur taille standard et en 100px de large pour les rendre plus lisibles.

su-flag-af

su-flag-za

su-flag-al

su-flag-dz

su-flag-de

su-flag-ad

su-flag-eng

su-flag-ao

su-flag-ag

su-flag-sa

su-flag-ar

su-flag-am

su-flag-aw

su-flag-ain

su-flag-au

su-flag-at

su-flag-az

su-flag-bs

su-flag-bh

su-flag-bd

su-flag-bb

su-flag-be

su-flag-bz

su-flag-bj

su-flag-bm

su-flag-bt

su-flag-by

su-flag-mm

su-flag-bo

su-flag-ba

su-flag-bw

su-flag-br

su-flag-bn

su-flag-bg

su-flag-bf

su-flag-bi

su-flag-kh

su-flag-cm

su-flag-ca

su-flag-cv

su-flag-cl

su-flag-cn

su-flag-cy

su-flag-co

su-flag-km

su-flag-cg

su-flag-kp

su-flag-kr

su-flag-cr

su-flag-ci

su-flag-hr

su-flag-cu

su-flag-dk

su-flag-dj

su-flag-dm

su-flag-sco

su-flag-eg

su-flag-ae

su-flag-ec

su-flag-eor

su-flag-er

su-flag-es

su-flag-ee

su-flag-sz

su-flag-va

su-flag-us

su-flag-et

su-flag-fj

su-flag-fi

su-flag-fr

su-flag-ga

su-flag-gm

su-flag-ge

su-flag-gh

su-flag-gr

su-flag-gd

su-flag-gu

su-flag-gt

su-flag-gw

su-flag-gq

su-flag-gn

su-flag-gy

su-flag-ht

su-flag-hn

su-flag-hk

su-flag-hu

su-flag-ck

su-flag-ky

su-flag-mh

su-flag-sb

su-flag-vg

su-flag-vi

su-flag-in

su-flag-id

su-flag-iq

su-flag-ir

su-flag-ie

su-flag-is

su-flag-il

su-flag-it

su-flag-jm

su-flag-jp

su-flag-jo

su-flag-kz

su-flag-ke

su-flag-kg

su-flag-ki

su-flag-kos

su-flag-kw

su-flag-la

su-flag-ls

su-flag-lv

su-flag-lb

su-flag-lr

su-flag-ly

su-flag-li

su-flag-lt

su-flag-lu

su-flag-mk

su-flag-mg

su-flag-my

su-flag-mw

su-flag-mv

su-flag-ml

su-flag-mt

su-flag-ma

su-flag-mu

su-flag-mr

su-flag-mx

su-flag-fm

su-flag-md

su-flag-mc

su-flag-mn

su-flag-me

su-flag-mz

su-flag-na

su-flag-nr

su-flag-np

su-flag-ni

su-flag-ng

su-flag-ne

su-flag-nu

su-flag-no

su-flag-nz

su-flag-om

su-flag-ug

su-flag-uz

su-flag-pk

su-flag-pw

su-flag-ps

su-flag-pa

su-flag-pg

su-flag-py

su-flag-nl

su-flag-cym

su-flag-pe

su-flag-ph

su-flag-pl

su-flag-pr

su-flag-pt

su-flag-qa

su-flag-cf

su-flag-cd

su-flag-do

su-flag-ro

su-flag-gb

su-flag-ru

su-flag-rw

su-flag-kn

su-flag-lc

su-flag-sm

su-flag-vc

su-flag-sv

su-flag-ws

su-flag-as

su-flag-st

su-flag-sn

su-flag-rs

su-flag-sc

su-flag-sl

su-flag-sg

su-flag-sk

su-flag-si

su-flag-so

su-flag-ss

su-flag-sd

su-flag-lk

su-flag-se

su-flag-ch

su-flag-sr

su-flag-sy

su-flag-tj

su-flag-tac

su-flag-tw

su-flag-tz

su-flag-td

su-flag-cz

su-flag-th

su-flag-tl

su-flag-tg

su-flag-to

su-flag-tt

su-flag-tn

su-flag-tm

su-flag-tr

su-flag-tv

su-flag-ua

su-flag-uy

su-flag-vu

su-flag-ve

su-flag-vn

su-flag-ye

su-flag-zm

su-flag-zw