DrawOptions型
リファレンスの説明と例は英語です。見出しと目次は日本語です。
Everything a drawing can be told: the layout, look, size, theme, background, language, marks, flags, trophy, links and titles.
インポート
import type { DrawOptions } from "@johnmorrisdotca/taisen-brackets/layout";
ほかのエクスポート元: @johnmorrisdotca/taisen-brackets
定義
interface DrawOptions extends LayoutOptions {
layout?: LayoutName;
headers?: boolean;
at?: boolean;
standings?: "points" | "record";
qualify?: number;
judo?: boolean;
style?: boolean;
styleScope?: string;
size?: SizeName | {
width: number;
height?: number | null;
};
orientation?: "auto" | "horizontal" | "vertical";
detail?: Detail;
theme?: ThemeName;
background?: boolean | BackgroundPresetName | BackgroundOptions | BackgroundImageOptions;
vs?: boolean;
codes?: boolean;
title?: string;
subtitle?: string;
roundNames?: readonly string[] | {
rounds: readonly {
name: string;
}[];
};
roundLabels?: boolean;
scores?: boolean;
seeds?: boolean;
markShape?: "round" | "square" | "none";
champion?: boolean;
trophy?: string;
emblems?: EmblemRenderer;
emblemStyle?: EmblemStyle;
emblemTint?: string;
flags?: FlagRenderer;
flagHref?: (code: string) => string | null | undefined;
tieClass?: (tie: Tie) => string | null | undefined;
look?: Look;
href?: (tie: Tie, side?: 0 | 1) => string | null | undefined;
highlightPath?: SideId;
thirdPlace?: "below" | "hide";
winnerHighlight?: boolean;
locale?: string | Locale;
words?: Partial<Words>;
teamName?: (team: Team, locale: Locale) => string | undefined;
id?: string;
className?: string;
}
メンバー
| 名前 | 型 | 説明 |
|---|---|---|
layout (省略可) | LayoutName | undefined |
|
headers (省略可) | boolean | undefined | Big title tiles (the halves' groups: West and East, AFC and NFC) over each half, in any layout: each half's |
at (省略可) | boolean | undefined | In the |
standings (省略可) | "points" | "record" | undefined | In the |
qualify (省略可) | number | undefined | In the |
judo (省略可) | boolean | undefined | For |
style (省略可) | boolean | undefined | Write the |
styleScope (省略可) | string | undefined | A class that carries this drawing's rules in place of its own: two drawings with the same |
size (省略可) | SizeName | { width: number; height?: number | null; } | undefined |
|
orientation (省略可) | "auto" | "horizontal" | "vertical" | undefined |
|
detail (省略可) | Detail | undefined | |
theme (省略可) | ThemeName | undefined |
|
background (省略可) | boolean | "midnight" | "crimson" | "royal" | "emerald" | "pitch" | "ice" | "hardwood" | "infield" | "turf" | "ball-panels" | "swirl" | "waves" | "glow" | "floodlights" | "confetti" | "carbon" | "aurora" | "sunburst" | "chevrons" | "halftone" | "argyle" | "contour" | "stardust" | "mesh" | "spotlight" | BackgroundOptions | BackgroundImageOptions | undefined | The background. |
vs (省略可) | boolean | undefined | In the road look, write a small |
codes (省略可) | boolean | undefined | In the road look, write each team's three-letter code under its mark in a box of marks alone. Default false for a bracket (a chart's |
title (省略可) | string | undefined | |
subtitle (省略可) | string | undefined | |
roundNames (省略可) | readonly string[] | { rounds: readonly { name: string; }[]; } | undefined | Names of the rounds, first round first (or just the last ones). Default: Final, Semi-finals, Quarter-finals, Round of 16… |
roundLabels (省略可) | boolean | undefined | Show the round names over the columns. Default true; false in the flag-only look. |
scores (省略可) | boolean | undefined | Show the scores. Default true. |
seeds (省略可) | boolean | undefined | Show seeds: the number before the name in the classic look, and in the road look a small tag ( |
markShape (省略可) | "round" | "none" | "square" | undefined |
|
champion (省略可) | boolean | undefined | Show the champion in the centre once the final is played. Default true. |
trophy (省略可) | string | undefined | A trophy for the centre, drawn above the champion: inline SVG, an image address, or (with |
emblems (省略可) | EmblemRenderer | undefined | Draws the emblem a |
emblemStyle (省略可) | EmblemStyle | undefined | The style an emblem is drawn in: |
emblemTint (省略可) | string | undefined | A colour for the emblem's main part (a hex colour or |
flags (省略可) | FlagRenderer | undefined | Draws the flag a team's |
flagHref (省略可) | ((code: string) => string | null | undefined) | undefined | The address of the flag a team's |
tieClass (省略可) | ((tie: Tie) => string | null | undefined) | undefined | A class for each tie's group, from the tie: |
look (省略可) | Look | undefined |
|
href (省略可) | ((tie: Tie, side?: 0 | 1) => string | null | undefined) | undefined | A link for each tie's box, from the tie and, for a link on one team's row, its side (0 or 1). Called with the tie alone first: an address
makes the whole box a link; when that gives none, each side is asked, and a row with an address is a link of its own. Each is a real
|
highlightPath (省略可) | SideId | undefined | The id of a team whose path to the final is drawn as a dotted line in the look's highlight, the rest quieter. |
thirdPlace (省略可) | "below" | "hide" | undefined | Where the third-place match goes: |
winnerHighlight (省略可) | boolean | undefined | Highlight the side that went through. Default true. |
locale (省略可) | string | Locale | undefined | The language: |
words (省略可) | Partial<Words> | undefined | Replace any of the language's words. |
teamName (省略可) | ((team: Team, locale: Locale) => string | undefined) | undefined | The name to draw for a team in this language: |
id (省略可) | string | undefined | Prefix for the drawing's ids. Default: a hash of the bracket and the options. Only letters, digits, |
className (省略可) | string | undefined | Extra class names for the root |
shape (省略可) | "halves" | "ltr" | "auto" | undefined |
|
groupOrder (省略可) | readonly string[] | undefined | The order of the halves' groups, first on the left: |
例
import { drawBracket, type DrawOptions } from "@johnmorrisdotca/taisen-brackets";
const options: DrawOptions = { look: "road", theme: "dark", size: "card", title: "Aurora Cup", locale: "ja" };
console.log(drawBracket([{ sides: ["Aurora", "Harbour"], score: [2, 1] }, { sides: ["Cascade", "Delta"], score: [0, 1] }, { sides: ["Aurora", "Delta"], score: [3, 1] }], options).startsWith("<svg"));true出力(このページを作ったときに実行した結果)
この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。