mirror of
https://github.com/tabler/tabler.git
synced 2026-10-22 23:57:26 +04:00
90 lines
3.7 KiB
Plaintext
90 lines
3.7 KiB
Plaintext
---
|
|
title: Flags
|
|
summary: The flags plugin adds over 300 country, territory and organisation flags as CSS classes, for language switchers, address forms and phone number fields.
|
|
description: Display country flags with the Tabler flags plugin. Add a flag with two CSS classes and scale it with ready-made size modifiers.
|
|
css-plugins: [flags]
|
|
source: core/scss/ui/_flags.scss
|
|
classnames:
|
|
component:
|
|
- class: flag
|
|
desc: Container element, a rounded rectangle holding one flag
|
|
color:
|
|
- class: flag-country-{code}
|
|
desc: The flag to show, by ISO code or slug - for example flag-country-pl, flag-country-us or flag-country-european-union
|
|
size:
|
|
- class: flag-{size}
|
|
desc: From flag-xxs to flag-2xl; the default matches an avatar
|
|
---
|
|
|
|
import Example from '@components/Example.astro'
|
|
import Flags from '@components/Flags.astro'
|
|
import CdnImportPlugin from '@components/CdnImportPlugin.astro'
|
|
|
|
## Installation
|
|
|
|
The flags are a plugin. Include `tabler-flags.css` or `tabler-flags.min.css` in your page to enable them.
|
|
|
|
You can also include the plugin via CDN:
|
|
|
|
<CdnImportPlugin plugins={['flags']} />
|
|
|
|
## Flag
|
|
|
|
Add the `flag` class to an element and a country class from the list below.
|
|
|
|
<Example centered>
|
|
<span class="flag flag-country-us"></span>
|
|
</Example>
|
|
|
|
## Country flags
|
|
|
|
The country class is `flag-country-` followed by the two-letter ISO code, for example `.flag-country-ad` for Andorra. Flags of organisations and other flags without an ISO code use a slug instead, for example `.flag-country-african-union`. The full list is at the end of this page.
|
|
|
|
The flags come from [Tabler Flags](https://github.com/tabler/tabler-flags), which also ships them as SVG and PNG files and as React, Vue, Preact and Astro components. Every flag is drawn at a 5:4 ratio, so a row of flags lines up whatever the countries are.
|
|
|
|
<Example centered>
|
|
<span class="flag flag-country-tg"></span>
|
|
<span class="flag flag-country-br"></span>
|
|
<span class="flag flag-country-pt"></span>
|
|
</Example>
|
|
|
|
## Flag sizes
|
|
|
|
Add a size class from `flag-xxs` to `flag-2xl` to scale the flag. The sizes are the same as the [avatar](/ui/components/avatar) sizes, so a flag and an avatar in one list line up.
|
|
|
|
<Example centered>
|
|
<span class="flag flag-2xl flag-country-us"></span>
|
|
<span class="flag flag-xl flag-country-us"></span>
|
|
<span class="flag flag-lg flag-country-us"></span>
|
|
<span class="flag flag-md flag-country-us"></span>
|
|
<span class="flag flag-sm flag-country-us"></span>
|
|
<span class="flag flag-xs flag-country-us"></span>
|
|
<span class="flag flag-xxs flag-country-us"></span>
|
|
</Example>
|
|
|
|
## Old flag codes
|
|
|
|
A few flags changed their code in Tabler 1.7, when the plugin moved to the Tabler Flags set. The old classes keep working as aliases, so nothing breaks, but they are deprecated and will be removed in 2.0. Switch to the new code when you touch the markup:
|
|
|
|
Old class|New class
|
|
---|---
|
|
`.flag-country-afrun`|`.flag-country-african-union`
|
|
`.flag-country-bq-bo`|`.flag-country-bq1`
|
|
`.flag-country-bq-sa`|`.flag-country-bq2`
|
|
`.flag-country-bq-se`|`.flag-country-bq3`
|
|
`.flag-country-kn-sk`|`.flag-country-kn`
|
|
`.flag-country-unasur`|`.flag-country-south-american-union`
|
|
|
|
## Flags list
|
|
|
|
All available flags, grouped by category:
|
|
|
|
<Flags />
|
|
|
|
## Accessibility
|
|
|
|
- A flag is a picture, not a language and not a country name. Always put the name in text next to it, or in an `aria-label`.
|
|
- Many languages are spoken in more than one country, and many countries in more than one language. A flag on a language switcher is ambiguous - use the language name, written in that language.
|
|
- The flag element is decoration, so keep it out of the reading order with `aria-hidden="true"` when the name is already there.
|
|
- Do not use a flag as the only mark of a selected option.
|