`CardBackOptions`型

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

How a back is drawn. Every field may be left out.

インポート

import type { CardBackOptions } from "@johnmorrisdotca/toranpu/card-backs";

定義

type CardBackOptions = {
    colour?: string;
    ink?: string;
    paper?: string;
    mark?: string;
    width?: number;
    title?: string;
    art?: string;
    image?: string;
    logo?: string;
    logoSize?: number;
};

メンバー

名前	型	説明
`colour` (省略可)	`string \| undefined`	The field's colour, in place of the back's own: `#8f2826`, `rebeccapurple`, `rgb(…)`. Anything else is ignored.
`ink` (省略可)	`string \| undefined`	The colour of the lines and dots on the field.
`paper` (省略可)	`string \| undefined`	The colour of the paper round the field.
`mark` (省略可)	`string \| undefined`	Words in the middle, such as a site's name or mark ("五つ", "一つ"), in place of the back's own ornament.
`width` (省略可)	`number \| undefined`	The width to draw at, in pixels; the height is 1.4 times it. Unless said, the drawing has no size and fills what holds it.
`title` (省略可)	`string \| undefined`	What a screen reader says for it. Unless said (or said as ""), the back is decoration and says nothing.
`art` (省略可)	`string \| undefined`	Your own artwork for the whole back: SVG markup drawn in the 100 by 140 box, over the paper, in place of the lattice and the ornament. It is the page's own markup: scripts, handlers and foreign objects are taken out of it.
`image` (省略可)	`string \| undefined`	Your own picture for the whole back, in place of the lattice and the ornament: a `data:image/` address, an `https:` address, or an address on your own site. It fills the card inside its rounded edge. Drawn into a page it loads like any image; as an image of its own (`cardBackUrl`) only a `data:image/` address can load, which is how browsers treat a picture inside a picture.
`logo` (省略可)	`string \| undefined`	Your logo, in the middle of the back: SVG markup drawn in a 100 by 100 box, or a picture's address as for `image`. Over the lattice it sits on a plate of the paper's colour; over your own `art` or `image` it sits as it is.
`logoSize` (省略可)	`number \| undefined`	How wide the logo is drawn, in units of the 100 wide card. Unless said, 34; at most 80.

例

import type { CardBackOptions } from "@johnmorrisdotca/toranpu/card-backs";

const value: CardBackOptions = { width: 80, colour: "#2f5d4a", mark: "D" };
console.log(value.mark);

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

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

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

CardBackOptions型

定義

メンバー

例

`CardBackOptions`型