Skip to content

TelixonFlag

A component with the selector telixon-flag. It shows the cell of its region from the sprite sheet of @telixon/web-sdk. The flag is decorative and carries aria-hidden. The region’s name belongs in the text next to the flag.

<telixon-flag region="US" />
Input Type Meaning
region RegionCode | null Required. The region whose flag shows; null shows the neutral flag.

@telixon/angular/flags/flags.css sizes the flag and loads the sprite images. Import the stylesheet once in the application’s styles:

@import '@telixon/angular/flags/flags.css';

A component with shadow DOM imports the stylesheet in its own styles as well, because the application’s stylesheet does not reach into a shadow root.

The cell is 1.5em wide with a 4 / 3 aspect ratio. Set the width of .tlx-flag to size the flag. The package re-exports flagTransform and flagOffset for flags in markup of your own.