mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
73 lines
2.5 KiB
Plaintext
73 lines
2.5 KiB
Plaintext
---
|
|
title: Flags
|
|
summary: The flags plugin adds country 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 country to show, by ISO code - for example flag-country-pl or flag-country-us
|
|
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 country code, for example `.flag-country-ad` for Andorra. The full list is at the end of this page.
|
|
|
|
<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-xs` to `flag-xl` to scale the flag. The names follow the usual Bootstrap pattern.
|
|
|
|
<Example centered>
|
|
<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>
|
|
</Example>
|
|
|
|
## Flags list
|
|
|
|
All available countries:
|
|
|
|
<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.
|