#021 仕様書用 UI Parts Shape Pack

既存40種類 + 追加43種類 / SVG表示用Shape（UIとしての実動作はしません） / Candidate v1.0.94

#021へ戻る文章表現（42）絵文字風フォント（82）使用ガイドMD
既存のbone-shape.jsとbone-shapes.jsonを読み込んでいます。

基本UI（17種類）

ウィンドウ枠

タイトルと内容領域を持つ画面枠

描画待ち
<span class="bf-inline-shape" data-shape-type="WINDOW_FRAME_UI"></span>

最小化

ウィンドウを最小化するボタン

描画待ち
<span class="bf-inline-shape" data-shape-type="WINDOW_CONTROL_MINIMIZE"></span>

最大化

ウィンドウを最大化するボタン

描画待ち
<span class="bf-inline-shape" data-shape-type="WINDOW_CONTROL_MAXIMIZE"></span>

元に戻す

最大化前の大きさに戻すボタン

描画待ち
<span class="bf-inline-shape" data-shape-type="WINDOW_CONTROL_RESTORE"></span>

閉じる

ウィンドウを閉じるボタン

描画待ち
<span class="bf-inline-shape" data-shape-type="WINDOW_CONTROL_CLOSE"></span>

ボタン

標準操作ボタン

描画待ち
<span class="bf-inline-shape" data-shape-type="BUTTON_RECT"></span>

アイコンボタン

アイコンのみの操作ボタン

描画待ち
<span class="bf-inline-shape" data-shape-type="BUTTON_ICON"></span>

スプリットボタン

主操作と候補の分割ボタン

描画待ち
<span class="bf-inline-shape" data-shape-type="BUTTON_SPLIT"></span>

チェックボックス

ON/OFF選択

描画待ち
<span class="bf-inline-shape" data-shape-type="CHECKBOX_UI"></span>

オプションボタン

単一選択

描画待ち
<span class="bf-inline-shape" data-shape-type="RADIO_BUTTON_UI"></span>

ラベル

項目名・必須印・補足説明（#020 Labelの表示専用Shape）

描画待ち
<span class="bf-inline-shape" data-shape-type="LABEL_UI"></span>

テキストボックス

1行文字入力

描画待ち
<span class="bf-inline-shape" data-shape-type="TEXTBOX_UI"></span>

コンボボックス

候補付き入力

描画待ち
<span class="bf-inline-shape" data-shape-type="COMBOBOX_UI"></span>

トースト通知

簡易通知

描画待ち
<span class="bf-inline-shape" data-shape-type="TOAST_UI"></span>

ダイアログ

モーダルダイアログ

描画待ち
<span class="bf-inline-shape" data-shape-type="DIALOG_UI"></span>

タブ

タブ切替見出し

描画待ち
<span class="bf-inline-shape" data-shape-type="TAB_UI"></span>

メニュー

操作候補の一覧

描画待ち
<span class="bf-inline-shape" data-shape-type="MENU_UI"></span>

カレンダー（11種類）

月カレンダー

1か月の予定表示

描画待ち
<span class="bf-inline-shape" data-shape-type="CALENDAR_MONTH"></span>

週カレンダー

1週間の予定表示

描画待ち
<span class="bf-inline-shape" data-shape-type="CALENDAR_WEEK"></span>

日付セル

通常の日付セル

描画待ち
<span class="bf-inline-shape" data-shape-type="CALENDAR_DAY_CELL"></span>

選択日セル

選択状態の日付セル

描画待ち
<span class="bf-inline-shape" data-shape-type="CALENDAR_DAY_SELECTED"></span>

今日セル

今日の強調表示

描画待ち
<span class="bf-inline-shape" data-shape-type="CALENDAR_DAY_TODAY"></span>

祝日セル

祝日の日付

描画待ち
<span class="bf-inline-shape" data-shape-type="CALENDAR_DAY_HOLIDAY"></span>

イベントセル

イベントを持つ日付

描画待ち
<span class="bf-inline-shape" data-shape-type="CALENDAR_DAY_EVENT"></span>

タスクセル

タスクを持つ日付

描画待ち
<span class="bf-inline-shape" data-shape-type="CALENDAR_DAY_TASK"></span>

カレンダーヘッダ

年月と前月/翌月

描画待ち
<span class="bf-inline-shape" data-shape-type="CALENDAR_HEADER"></span>

前へ

前月/前週へ移動

描画待ち
<span class="bf-inline-shape" data-shape-type="CALENDAR_NAV_PREV"></span>

次へ

翌月/翌週へ移動

描画待ち
<span class="bf-inline-shape" data-shape-type="CALENDAR_NAV_NEXT"></span>

タイムライン（8種類）

時間グリッド

時間目盛りと背景格子

描画待ち
<span class="bf-inline-shape" data-shape-type="TIMELINE_GRID"></span>

タイムバー

開始・終了を示す時間帯

描画待ち
<span class="bf-inline-shape" data-shape-type="TIMELINE_BAR"></span>

範囲バー

開始・終了ハンドル付き

描画待ち
<span class="bf-inline-shape" data-shape-type="TIMELINE_BAR_RANGE"></span>

選択バー

選択中のバー

描画待ち
<span class="bf-inline-shape" data-shape-type="TIMELINE_BAR_SELECTED"></span>

縦タイムライン

時間を縦方向に表す

描画待ち
<span class="bf-inline-shape" data-shape-type="TIMELINE_VERTICAL"></span>

横タイムライン

時間を横方向に表す

描画待ち
<span class="bf-inline-shape" data-shape-type="TIMELINE_HORIZONTAL"></span>

時刻ラベル

時間目盛りの文字

描画待ち
<span class="bf-inline-shape" data-shape-type="TIMELINE_LABEL_HOUR"></span>

現在時刻線

現在時刻位置

描画待ち
<span class="bf-inline-shape" data-shape-type="TIMELINE_MARKER_NOW"></span>

Picker（7種類）

DatePicker

日付選択UIの概観

描画待ち
<span class="bf-inline-shape" data-shape-type="DATE_PICKER_UI"></span>

TimePicker

時刻選択UIの概観

描画待ち
<span class="bf-inline-shape" data-shape-type="TIME_PICKER_UI"></span>

DateTimePicker

日時入力UIの概観

描画待ち
<span class="bf-inline-shape" data-shape-type="DATETIME_PICKER_UI"></span>

ColorPicker

色の選択UIの概観

描画待ち
<span class="bf-inline-shape" data-shape-type="COLOR_PICKER_UI"></span>

FilePicker

ファイル選択UIの概観

描画待ち
<span class="bf-inline-shape" data-shape-type="FILE_PICKER_UI"></span>

Pickerポップアップ

展開時の選択パネル

描画待ち
<span class="bf-inline-shape" data-shape-type="PICKER_POPUP_UI"></span>

候補一覧

選択候補リスト

描画待ち
<span class="bf-inline-shape" data-shape-type="OPTION_LIST_UI"></span>

追加43種類のTYPE一覧表

既存40種類は元のShape Registryに保持しています。この一覧は今回追加分です。

TYPE表示名分類用途
WINDOW_FRAME_UIウィンドウ枠基本UIタイトルと内容領域を持つ画面枠
WINDOW_CONTROL_MINIMIZE最小化基本UIウィンドウを最小化するボタン
WINDOW_CONTROL_MAXIMIZE最大化基本UIウィンドウを最大化するボタン
WINDOW_CONTROL_RESTORE元に戻す基本UI最大化前の大きさに戻すボタン
WINDOW_CONTROL_CLOSE閉じる基本UIウィンドウを閉じるボタン
BUTTON_RECTボタン基本UI標準操作ボタン
BUTTON_ICONアイコンボタン基本UIアイコンのみの操作ボタン
BUTTON_SPLITスプリットボタン基本UI主操作と候補の分割ボタン
CHECKBOX_UIチェックボックス基本UION/OFF選択
RADIO_BUTTON_UIオプションボタン基本UI単一選択
LABEL_UIラベル基本UI項目名・必須印・補足説明（#020 Labelの表示専用Shape）
TEXTBOX_UIテキストボックス基本UI1行文字入力
COMBOBOX_UIコンボボックス基本UI候補付き入力
TOAST_UIトースト通知基本UI簡易通知
DIALOG_UIダイアログ基本UIモーダルダイアログ
TAB_UIタブ基本UIタブ切替見出し
MENU_UIメニュー基本UI操作候補の一覧
CALENDAR_MONTH月カレンダーカレンダー1か月の予定表示
CALENDAR_WEEK週カレンダーカレンダー1週間の予定表示
CALENDAR_DAY_CELL日付セルカレンダー通常の日付セル
CALENDAR_DAY_SELECTED選択日セルカレンダー選択状態の日付セル
CALENDAR_DAY_TODAY今日セルカレンダー今日の強調表示
CALENDAR_DAY_HOLIDAY祝日セルカレンダー祝日の日付
CALENDAR_DAY_EVENTイベントセルカレンダーイベントを持つ日付
CALENDAR_DAY_TASKタスクセルカレンダータスクを持つ日付
CALENDAR_HEADERカレンダーヘッダカレンダー年月と前月/翌月
CALENDAR_NAV_PREV前へカレンダー前月/前週へ移動
CALENDAR_NAV_NEXT次へカレンダー翌月/翌週へ移動
TIMELINE_GRID時間グリッドタイムライン時間目盛りと背景格子
TIMELINE_BARタイムバータイムライン開始・終了を示す時間帯
TIMELINE_BAR_RANGE範囲バータイムライン開始・終了ハンドル付き
TIMELINE_BAR_SELECTED選択バータイムライン選択中のバー
TIMELINE_VERTICAL縦タイムラインタイムライン時間を縦方向に表す
TIMELINE_HORIZONTAL横タイムラインタイムライン時間を横方向に表す
TIMELINE_LABEL_HOUR時刻ラベルタイムライン時間目盛りの文字
TIMELINE_MARKER_NOW現在時刻線タイムライン現在時刻位置
DATE_PICKER_UIDatePickerPicker日付選択UIの概観
TIME_PICKER_UITimePickerPicker時刻選択UIの概観
DATETIME_PICKER_UIDateTimePickerPicker日時入力UIの概観
COLOR_PICKER_UIColorPickerPicker色の選択UIの概観
FILE_PICKER_UIFilePickerPickerファイル選択UIの概観
PICKER_POPUP_UIPickerポップアップPicker展開時の選択パネル
OPTION_LIST_UI候補一覧Picker選択候補リスト