Bone Flow #020 - Label

Version 1.0.61 / Status: Development

Dependencies#001 Bone Core 既存正式版 #002 Bone Joint 既存正式版

使用コンポーネント

#001 Bone Core使用中

Version 確認中Status 確認中API 確認中

#002 Bone Joint接続表現

Version 確認中Status 確認中API 確認中

#022 Hover Border EffectLabel Hover Border Effect

Version 確認中Status 確認中API 確認中

#117 Animation要素Motion

Version 確認中Status 確認中API 確認中

#040 ColorPicker色選択UI

Version 確認中Status 確認中API 確認中

#020 Bone LabelはLABEL Boneを受け取り、自身でラベルを描画します。親要素主モードでは、合算プレビュー領域そのものを親要素としてIN/OUT関係性を確認します。接続線・端点・不存在・型不一致の描画は#002 Bone Jointへ委譲します。マウスオーバー時の枠Effectは#022 Hover Border EffectのPublic APIへ委譲します。要素本体のAnimation/Motionは#117 Animation v1.0.9へRelationで委譲し、#020内に独自keyframe・timer・loopを持ちません。色Propertyの選択UIは#040 ColorPickerへ委譲します。

テスト対象：Bone Coreで生成したLABEL Bone（id / type / value）、ラベル単体、抽象的な親要素を使う構成、IN/OUT関係、関連付け、配置、文字設定、合算プレビュー、Bone Joint接続イメージ、公開APIを確認します。

登録済みUI

Classリスト / Public API

親Componentから内部DOMを直接操作せず、instance経由で#020 Labelを参照するための正式Class APIです。

Class / Public API・使用方法・操作説明を1つのガイドで確認できます。

接続イメージ

LabelをIN／OUTのEndpointとして利用した場合の正式な状態別イメージです。線・端点・不存在・型不一致はBone Jointの責務です。

表示色（凡例）

青色：IN 接続線

緑色：OUT 接続線

オレンジ：型不一致

赤色：接続エラー／不存在終端

Smoke Test / Validation Report

NOT RUN

実行日時-

検査件数0件

PASS0件

FAIL0件

実行時間0.0ms

Version1.0.61

Smoke Test 結果NOT RUN

Smoke Testは未実行です。

Validation 結果NOT RUN

Validationは未実行です。

コンポーネント完了管理

Smoke TestとValidation ReportがALL PASSになった後に完了できます。

Component#020 Bone Label

Version1.0.61

Completion Flagfalse

StatusDevelopment

ValidationDevelopment

完了日時-

全テストALL PASS後に完了できます。

Bone Flow #020 Label ガイド

#020 Label Class / Public API・使用方法・操作説明

1. Class / Public API

親ComponentはLabel内部DOMではなく BoneLabel.Component instanceを保持して操作します。

2. 使用方法

単体生成

const label = BoneLabel.createInstance(labelBone);

親へ吸着

const label = BoneLabel.attachInstance(parentElement, labelBone);
parentComponentState.label = label;

親から参照

const label = BoneLabel.getInstance(parentElement);
label.setValue({ text: "氏名" });
const output = label.getOutput();
const state = label.getState();

解除 / 破棄

label.detach();
label.destroy();

親Componentから .bone-label や .bone-label-text を直接検索して操作しません。

3. 操作説明

親要素に吸着：チェックOFFはLabel単体、チェックONは親要素へ吸着です。
親要素設定（継承確認用）：親の幅・高さ・背景色・文字色・角丸を設定してPreviewを確認します。テスト用設定なのでOUT・保存データには含みません。
表示位置：9方向またはFITを選択します。FITは親表示領域にLabelを合わせます。
文字・背景・枠：#040 ColorPickerを開いて色を選択します。背景は単色 / 透過 / グラデーションに対応します。
#022 Hover Border Effect：「マウスオーバー時の枠Effect」で有効化すると、Label単体または吸着先の親要素へ#022 Public APIで枠Effectを接続します。
#117 Animation：「エフェクト」で要素本体のMotionを設定します。Animation UI番号 / Target UI番号 / Target PartをRelationとして#117 v1.0.9へ渡し、#020自身はkeyframe・timer・loopを持ちません。
Class参照：実装時は attachInstance() または instance.attach() で親へ吸着します。
確認：合算プレビュー → OUT値 → Smoke Test / Validation → Completionの順で確認します。

親Component側の基本操作

const label = BoneLabel.attachInstance(parentElement, input);
label.update({ text: "更新後" });
const out = label.getOutput();

HTML Class / Public API26 Class / Class一覧・説明・引数・実UI・Resultを共通ガイドで確認します。

Bone Flow #020 Label Class ガイドHTML class / Public API / 引数 / 実行結果

Class一覧26

1. HTML Class の使い方

このClassはJavaScriptの class {} ではありません。 HTML要素の class="" に機能Classを設定し、そのClassと1対1のPublic APIを呼び出すための宣言的な入口です。

Class一覧から使用する機能を選ぶ
HTML要素の class="" にClass名を設定する
data-bone-event でいつ呼ぶかを設定する
data-bone-args / data-bone-arg-N でAPI引数を渡す
戻り値はResult / State契約から取得する

<div class="bone-html-class-use bone-label-defaults" data-bone-event="manual"></div>

Class一覧

左側の Class一覧 26件 からClassを選択すると、そのClass専用の説明・引数・HTML例・実行・Resultを表示します。

2. Class共通引数契約

HTMLの class="" は「どのPublic APIを使うか」を指定します。Public APIへ渡す引数と呼出タイミングは、以下の共通 data-bone-* 属性で指定します。

実行マーカー: 機能Classは bone-html-class-use と組み合わせて使用します。例: class="bone-html-class-use bone-bone-label-defaults"。既存CSS Classを誤実行しないための共通契約です。

属性	役割	値 / Default	説明
`class`	機能Class	`bone-html-class-use bone-...-...`	`bone-html-class-use` とClass一覧の機能Classを同じ `class=""` に設定します。対応Public APIと1対1です。
`data-bone-event`	起動タイミング	`load` / click / input / change / manual 等 Default: `load`	複数指定は空白またはカンマ区切り。`manual` は自動実行せず、Bridgeの `invoke()` から実行します。
`data-bone-args`	引数一括指定	JSON Array	Public APIの引数順そのままのJSON配列です。例: `["$self","$value",{}]`
`data-bone-arg-N`	引数個別指定	Nは0始まり	`data-bone-arg-0`, `data-bone-arg-1` のように1引数ずつ指定します。一括指定より個別値を補完できます。
`data-bone-once`	イベント1回限定	`true` / Default: false	click等のイベント監視を1回だけ実行したい場合に指定します。
`data-bone-append-result`	Element戻り値	`false` でappend停止 Default: append	Public APIがElementを返した場合、既定ではClass設定要素へappendします。
`data-bone-throw`	Debug再throw	`true` / Default: false	Class実行エラーをResultへ保存した後、Debug用に非同期で再throwします。

特殊値

値	解決内容
`$self`	Classを設定したHTML要素そのものを渡します。element / target / root などの第1引数に使用します。
`$event`	Class起動の原因になったDOM Eventを渡します。click / input / change等のイベント情報が必要なAPI用です。
`$value`	input / textarea / select等の現在の value を渡します。
`$checked`	checkbox / radio等の現在の checked(Boolean)を渡します。
`$text`	Classを設定した要素の textContent を渡します。
`$dataset`	Classを設定した要素の dataset を通常Objectとして渡します。
`$files`	file input の FileList を渡します。
`$selector:...`	...をCSS selectorとして document.querySelector() で解決し、そのElementを渡します。
`$id:...`	...をDOM idとして document.getElementById() で解決し、そのElementを渡します。
`$global:...`	window / globalThis上の指定名の値を渡します。
`$handler:...`	window / globalThis上の指定名のFunctionをコールバック引数として渡します。

引数の優先順

data-bone-args で配列を読み込み、未指定位置を data-bone-arg-N と自動補完（第1引数のelement系は $self、event系は $event）で埋めます。

3. Result / State 契約

Class経由のPublic API実行結果は、Class設定要素自身へ保存されます。成功・失敗をHTMLとEventの両方から確認できます。

結果	内容	用途
`element.__boneClassResult`	Public APIの生の戻り値	JavaScript側で元のObject / Element / primitiveをそのまま参照します。
`data-bone-class-status`	`ok` / `error`	HTML属性だけで直近のClass実行成否を確認します。
`data-bone-class-result`	戻り値のserialize結果	DOM Inspectorやテストから結果概要を確認します。長い結果は1000文字で省略します。
`bone-html-class-result`	成功CustomEvent	`detail` に componentId / className / api / value を持ちます。
`bone-html-class-error`	失敗CustomEvent	`detail` に componentId / className / api / error を持ちます。

このガイドRuntime実行結果をClass別画面に表示

左のClass一覧からClassを選択し「このClassを実行」を押すと、実Public APIのStatus / Resultを表示します。

bone-label-defaults

BoneLabel.defaults の公開機能をHTML Classから呼び出します。

HTML Class	`bone-label-defaults`
対応Public API	`BoneLabel.defaults`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
引数なし。Classの起動だけでAPIを呼び出します。

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-defaults" data-bone-event="manual"></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-normalize-value

値をLabelの正式契約に沿う形へ正規化します。

HTML Class	`bone-label-normalize-value`
対応Public API	`BoneLabel.normalizeValue`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`input`	API定義値	`data-bone-arg-0` または `data-bone-args[0]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-normalize-value" data-bone-event="manual" data-bone-args='[null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-validate-value

Labelの入力・状態を検証し、Validation結果を返します。

HTML Class	`bone-label-validate-value`
対応Public API	`BoneLabel.validateValue`
使用する場面	HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`input`	API定義値	`data-bone-arg-0` または `data-bone-args[0]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-validate-value" data-bone-event="manual" data-bone-args='[null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-build-input

Labelで使用する出力・定義オブジェクトを構築します。

HTML Class	`bone-label-build-input`
対応Public API	`BoneLabel.buildInput`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`input`	API定義値	`data-bone-arg-0` または `data-bone-args[0]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-build-input" data-bone-event="manual" data-bone-args='[null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-build-output

Labelで使用する出力・定義オブジェクトを構築します。

HTML Class	`bone-label-build-output`
対応Public API	`BoneLabel.buildOutput`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`input`	API定義値	`data-bone-arg-0` または `data-bone-args[0]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-build-output" data-bone-event="manual" data-bone-args='[null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-render-output

指定先へLabelの表示を描画・更新します。

HTML Class	`bone-label-render-output`
対応Public API	`BoneLabel.renderOutput`
使用する場面	HTML上のホスト要素からUI生成・描画を開始したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`receiverElement`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`null`
1	`output`	API定義値	`data-bone-arg-1` または `data-bone-args[1]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-render-output" data-bone-event="manual" data-bone-args='[null,null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-create

Labelの新しい要素またはRuntimeオブジェクトを生成します。

HTML Class	`bone-label-create`
対応Public API	`BoneLabel.create`
使用する場面	HTML上のホスト要素からUI生成・描画を開始したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`input`	API定義値	`data-bone-arg-0` または `data-bone-args[0]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-create" data-bone-event="manual" data-bone-args='[null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-attach-to-parent

BoneLabel.attachToParent の公開機能をHTML Classから呼び出します。

HTML Class	`bone-label-attach-to-parent`
対応Public API	`BoneLabel.attachToParent`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`parentElement`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`input`	API定義値	`data-bone-arg-1` または `data-bone-args[1]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-attach-to-parent" data-bone-event="manual" data-bone-args='[&quot;$self&quot;,null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-play-effect

BoneLabel.playEffect の公開機能をHTML Classから呼び出します。

HTML Class	`bone-label-play-effect`
対応Public API	`BoneLabel.playEffect`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-play-effect" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-distribute-labels

BoneLabel.distributeLabels の公開機能をHTML Classから呼び出します。

HTML Class	`bone-label-distribute-labels`
対応Public API	`BoneLabel.distributeLabels`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`parentElement`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`inputs`	API定義値	`data-bone-arg-1` または `data-bone-args[1]`	`null`
2	`options`	Object	`data-bone-arg-2` または `data-bone-args[2]`	`{}`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-distribute-labels" data-bone-event="manual" data-bone-args='[&quot;$self&quot;,null,{}]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-get-input

Labelの「Input」を取得します。

HTML Class	`bone-label-get-input`
対応Public API	`BoneLabel.getInput`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-get-input" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-get-output

Labelの「Output」を取得します。

HTML Class	`bone-label-get-output`
対応Public API	`BoneLabel.getOutput`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-get-output" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-get-state

Labelの「State」を取得します。

HTML Class	`bone-label-get-state`
対応Public API	`BoneLabel.getState`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-get-state" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-is-instance

対象がLabelの「Instance」条件を満たすか判定します。

HTML Class	`bone-label-is-instance`
対応Public API	`BoneLabel.isInstance`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-is-instance" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-create-instance

Labelの新しい要素またはRuntimeオブジェクトを生成します。

HTML Class	`bone-label-create-instance`
対応Public API	`BoneLabel.createInstance`
使用する場面	HTML上のホスト要素からUI生成・描画を開始したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`input`	API定義値	`data-bone-arg-0` または `data-bone-args[0]`	`null`
1	`options`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-create-instance" data-bone-event="manual" data-bone-args='[null,{}]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-attach-instance

BoneLabel.attachInstance の公開機能をHTML Classから呼び出します。

HTML Class	`bone-label-attach-instance`
対応Public API	`BoneLabel.attachInstance`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`parentElement`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`input`	API定義値	`data-bone-arg-1` または `data-bone-args[1]`	`null`
2	`options`	Object	`data-bone-arg-2` または `data-bone-args[2]`	`{}`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-attach-instance" data-bone-event="manual" data-bone-args='[&quot;$self&quot;,null,{}]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-get-instance

Labelの「Instance」を取得します。

HTML Class	`bone-label-get-instance`
対応Public API	`BoneLabel.getInstance`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-get-instance" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-get-class-list

Labelの「Class List」を取得します。

HTML Class	`bone-label-get-class-list`
対応Public API	`BoneLabel.getClassList`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
引数なし。Classの起動だけでAPIを呼び出します。

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-get-class-list" data-bone-event="manual"></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-get-completion-state

Labelの「Completion State」を取得します。

HTML Class	`bone-label-get-completion-state`
対応Public API	`BoneLabel.getCompletionState`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
引数なし。Classの起動だけでAPIを呼び出します。

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-get-completion-state" data-bone-event="manual"></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-get-animation-state

Labelの「Animation State」を取得します。

HTML Class	`bone-label-get-animation-state`
対応Public API	`BoneLabel.getAnimationState`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-get-animation-state" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-get-animation-output

Labelの「Animation Output」を取得します。

HTML Class	`bone-label-get-animation-output`
対応Public API	`BoneLabel.getAnimationOutput`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-get-animation-output" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-get-animation-dependency

Labelの「Animation Dependency」を取得します。

HTML Class	`bone-label-get-animation-dependency`
対応Public API	`BoneLabel.getAnimationDependency`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
引数なし。Classの起動だけでAPIを呼び出します。

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-get-animation-dependency" data-bone-event="manual"></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-get-hover-border-effect-state

Labelの「Hover Border Effect State」を取得します。

HTML Class	`bone-label-get-hover-border-effect-state`
対応Public API	`BoneLabel.getHoverBorderEffectState`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-get-hover-border-effect-state" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-refresh-hover-border-effect

Labelの表示・接続・状態を現在値から再計算します。

HTML Class	`bone-label-refresh-hover-border-effect`
対応Public API	`BoneLabel.refreshHoverBorderEffect`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-refresh-hover-border-effect" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-complete

LabelのCompletion状態を確定します。

HTML Class	`bone-label-complete`
対応Public API	`BoneLabel.complete`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`validation`	String / API許容値	`data-bone-arg-0` または `data-bone-args[0]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-complete" data-bone-event="manual" data-bone-args='[null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-label-reopen

LabelのCompletion確定を解除して再編集可能にします。

HTML Class	`bone-label-reopen`
対応Public API	`BoneLabel.reopen`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
引数なし。Classの起動だけでAPIを呼び出します。

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-label-reopen" data-bone-event="manual"></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

登録済みUI

プロパティ設定

合算プレビュー

#020 Label OUT

#020 Label IN

#020 Label OUT（確認用）

Classリスト / Public API

接続イメージ

Smoke Test / Validation Report

Smoke Test 結果NOT RUN

Validation 結果NOT RUN

コンポーネント完了管理