`FrameOptions`型

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

How to frame a flag: its shape, how it fits, and a label for assistive technology. Every field may be left out.

インポート

import type { FrameOptions } from "@johnmorrisdotca/hata/load";

ほかのエクスポート元: @johnmorrisdotca/hata

定義

interface FrameOptions {
    shape?: Shape;
    fit?: Fit;
    label?: string;
}

メンバー

名前	型	説明
`shape` (省略可)	`Shape \| undefined`	The frame's shape: `flag` (the default, the flag's own aspect ratio), `4:3`, `1:1` or `round`.
`fit` (省略可)	`Fit \| undefined`	`auto` (the default) frames each flag the way measured to keep it true; `crop` crops it at the side chosen for it; `whole` (or `contain`) shows all of the flag inside the frame; `cover` and `hoist` crop from the centre and from the hoist.
`label` (省略可)	`string \| undefined`	A name for assistive technology. With one, the SVG gets `role="img"`, `aria-label` and a `<title>`.

例

import { frame, type FrameOptions } from "@johnmorrisdotca/hata";
import france from "@johnmorrisdotca/hata/flags/fr";

const avatar: FrameOptions = { shape: "round", label: "France" };
console.log(frame(france, avatar));

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="France"><title>France</title><defs><clipPath id="hata-round-yob49r"><circle cx="256" cy="256" r="256"/></clipPath></defs><g clip-path="url(#hata-round-yob49r)"><svg data-hata="fr" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" x="0" y="0" width="512" height="512" preserveAspectRatio="xMidYMid slice"><path fill="#ce1126" d="M0 0h900v600H0"/><path fill="#fff" d="M0 0h600v600H0"/><path fill="#002654" d="M0 0h300v600H0"/></svg></g></svg>

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

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

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

FrameOptions型

定義

メンバー

例

`FrameOptions`型