本文へ移動

Hata旗

国や地域の旗を読み込み、対応する表示の形を選び、絵ごとの資料・作者・ライセンスを保てます。

「旗(はた)」は、旗を表す日本語です。 名前について(英語)

目次

リファレンス · 標準の旗の要素

FLAG_ELEMENT_ATTRIBUTES定数

リファレンスの説明と例は英語です。見出しと目次は日本語です。

The attributes <hata-flag> reads. Changing any draws it afresh.

  • code: the flag's code, in any case ("JP", "jp-13", "CA-ON").
  • shape: own (the default: the flag's own proportions), 4:3, 1:1 or round. flag is the same as own.
  • width: a pixel width, with the height following the flag's proportions.
  • size: small, medium or large (24, 48 or 96 pixels high), or a legacy pixel height (48). Left out, it is 1em, the height of the text around it, and the page's CSS may set any height; the width follows from the shape.
  • fit: auto (the default: the frame measured for that flag, or the drawing flag-icons made for the shape), whole (all of the flag), crop (a crop at the side chosen for the flag), cover, hoist or contain, as frame() takes them.
  • variant: which of the place's flags in real use to draw, by its id from variantsOf(code): Afghanistan's de-facto, Bavaria's stripes, Guadeloupe's local. Left out, the default; a place with no flag of its own by default (Northern Ireland: union-flag, ulster-banner) draws only when one is named.
  • label: what a screen reader says. Left out, the place's name, in English or Japanese by lang.
  • lang: en or ja, the language of the name read out. Left out, the page's language where the element is.
  • theme: auto (the default), light or dark: the colour of the border on a light or a dark page.
  • border: a hairline round the flag, so a white flag shows on a white page.
  • shadow: a soft shadow under it.
  • loading: lazy (the default: loaded when it comes near the screen) or eager.

インポート

import { FLAG_ELEMENT_ATTRIBUTES } from "@johnmorrisdotca/hata/element";

定義

const FLAG_ELEMENT_ATTRIBUTES: readonly ["code", "shape", "size", "width", "fit", "variant", "label", "lang", "theme", "border", "shadow", "loading"] = ["code", "shape", "size", "width", "fit", "variant", "label", "lang", "theme", "border", "shadow", "loading"] as const

例

import { FLAG_ELEMENT_ATTRIBUTES } from "@johnmorrisdotca/hata/element";

console.log(FLAG_ELEMENT_ATTRIBUTES.includes("shape")); // true
true

出力(このページを作ったときに実行した結果)

ソースを見るGitHub で編集@johnmorrisdotca/hata 1.6.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。