6.3.4.4. ボタン¶
本章では、ボタンの配置、サイズについて説明します。
項目
6.3.4.4.1. imuiButton と CSS クラスでボタン作成¶
intra-mart Accel Platform では、UIコンポーネントとして imuiButton を用意しています。また、 CSSモジュールとして ボタンの複数サイズ用意しています。本章では基本的なボタンの記述方法を説明します。詳細は、 以下を参照してください。
- HTML 実装例
1 <imart type="imuiButton" value="ボタン" class="imui-medium-button" />画面上には以下のように表示されます。
6.3.4.4.2. ボタンのサイズ種類と CSS クラス¶
ボタンのサイズは 4 種類用意しています。以下にボタンの種類と CSS の クラス を下記にまとめます。
ボタンの種類 class 画面上の表示 大 imui-large-button 中 imui-medium-button 小 imui-small-button 通常 imui-button コラム
ボタンは、 imuiButton の使用を推奨します。しかし、 やむをえず HTML タグの input タグ 、button タグ を使用する場合、上記の CSS クラスを使用してください。intra-mart Accel Platform の統一されたデザインのボタンを配置できます。コラム
CSS クラスの詳細は、 CSS Module List の「ボタン」を参照してください。
6.3.4.4.3. ボタン配置¶
配置する順番は左から重要度、頻度などが高いものから配置します。
6.3.4.4.3.1. 登録画面、編集画面¶
6.3.4.4.3.1.1. 処理ボタン(登録/更新/削除ボタン)¶
ボタンサイズ
ボタンサイズの基本は「大」とします。
ボタン配置
画面下部の中央配置とします。CSS Module List のボタン配置エリア「.imui-operation-parts」 と組み合わせると、簡単に配置できます。下記の HTML ソースを参照してください。
1 2 3 <div class="imui-operation-parts"> <imart type="imuiButton" value="登録" class="imui-large-button" /> </div>
1 2 3 4 <div class="imui-operation-parts"> <imart type="imuiButton" value="更新" class="imui-large-button" /> <imart type="imuiButton" value="削除" class="imui-large-button" /> </div>
- 連続登録が可能な登録画面は、左から 登録ボタン、連続登録ボタン とします。
- 編集画面の配置順番は、左から 更新ボタン、削除ボタン とします。
6.3.4.4.3.1.2. 入力補助呼出し¶
本章は、ボタンについての説明ですが、本項に関しては関連する文字リンクなどもあわせて説明します。
入力補助画面を呼出し方法ボタン、文字リンク、アイコン、アイコン+文字リンクいずれかを使用します。 ボタンの場合
ボタンサイズの基本は「 通常 」とします。 配置はテキストボックス等入力フォーム部品右隣とします。 文字リンクの場合配置はテキストボックス等入力フォーム部品右隣とします。 アイコンの場合
配置はテキストボックス等入力フォーム部品右隣とします。 アイコンのみの処理ボタンの場合、title 属性を必ず指定 します。(ユーザビリティ向上のため。画像のみに意味を持たせないようにしてください。) アイコン+文字リンクの場合
配置はテキストボックス等入力フォーム部品右隣とします。 左からアイコン、文字リンクの順に並べます。
6.3.4.4.3.2. ダイアログ¶
処理ボタン
ボタンサイズボタンサイズの基本は「 中 」とします。 ボタン配置配置は 右下配置 とします。
入力補助呼出し登録画面に従います。
6.3.4.4.3.3. 検索画面(検索条件エリア)¶
- 簡単検索
ボタンサイズボタンサイズの基本は「 通常 」とします。 ボタン配置配置はテキストボックス等入力フォーム部品右隣とします。
- 詳細検索
ボタンサイズボタンサイズの基本は「 中 」とします。 ボタン配置配置は 右下配置 とします。