HIKAPROJ / WEB PLATFORM / V3

共通UIパーツ

Webサイト、アプリケーション、コンテンツに横断して使うUIパーツ。

Hikaproj Web Platform v3の基本パーツと状態見本です。ページの目的に合わせて組み合わせ、各パーツの仕様はデザインマニュアルを参照してください。

01 / ACTIONS

ボタン・リンク

PRIMARY / SECONDARY / TEXT

BUTTON / VARIANTS

ボタンの種類

LINK / BACK

リンク・戻る

システム概要を見る概要へ戻る

02 / INPUT

フォーム

TEXT / SELECT / CHECK / RADIO

FORM / TEXT

テキスト入力・複数行入力

テキスト入力複数行入力

FORM / SELECT

選択メニュー・範囲入力

選択メニュー範囲入力60

FORM / CHECKBOX

チェックボックス

複数選択できます通知を受け取る詳細も含める選択できません

FORM / RADIO & SWITCH

ラジオ・スイッチ

いずれか1つ選択標準詳細

機能を有効にする

03 / FEEDBACK

状態・フィードバック

BADGE / ALERT / PROGRESS

STATUS / BADGE

状態・バッジ

準備完了READY

完了情報注意下書き

FEEDBACK / ALERT

通知パネル

処理は正常に完了しました。

実行前に設定内容を確認してください。

処理に失敗しました。入力を確認してください。

PROGRESS / LOADING

進捗・読み込み

処理中68%

68%

データを読み込んでいます

FEEDBACK / EMPTY

空の状態

データがありません

条件を変更するか、新しい項目を追加してください。

04 / SURFACES

カード・リスト

PANEL / ROW / TABLE

SURFACE / PANEL

情報パネル

枠線と淡いグラデーションで内容をまとめます。説明やオプションを分けるときに使います。

マニュアルを読む

SURFACE / ITEM ROW

リスト行

01設定項目補足説明を表示します 02別の項目行全体をリンクにできます

DATA / TABLE

データテーブル

項目	状態	更新
設定 A	有効	たった今
設定 B	停止中	昨日

NAVIGATION / PAGINATION

ページネーション

05 / NAVIGATION

TAB / DISCLOSURE / DIALOG

NAVIGATION / TABS

タブ

概要の内容を表示しています。

DISCLOSURE / DETAILS

開閉パネル

詳細を表示する

クリックまたはキーボード操作で開閉できる、標準HTMLの開閉パネルです。

OVERLAY / DIALOG

ダイアログ

確認や短い補助操作を画面上に表示します。

TYPE / CODE

コード・インライン表示

設定値は theme = "dark" のようにインラインで示せます。

const status = "ready";
render(status);