6.3.4.5. 処理リンク/処理アイコン¶
本章では、処理リンク/処理アイコンについて説明します。ツールバー の 処理リンク/処理アイコン配置方法まとめ ではツールバーに関してのみ記述しています。本章では、汎用的に使用する処理リンク/処理アイコンを説明します。
6.3.4.5.1. 配置ルール¶
- 処理アイコン/処理リンクは、一覧テーブルの処理アイコン群、一覧テーブルのセル、入力フォーム等に使用します。
- 配置の優先度は、左から重要度、頻度などが高いものから順番に配置します。
- 処理アイコン/処理リンクの周りは、誤ってクリックしないよう空白を設けましょう。
- 反対の意味の処理アイコン/処理リンクを配置する場合
処理アイコン/処理リンクのサイズを十分とってください。処理アイコン/処理リンクの周りに空白をおくようにします。16px x 16px のアイコンは小さいため、ユーザによりわかりづらかったり、誤った操作が発生することがあります。よって、「アイコン+文字リンク」を推奨します。 処理アイコン/処理リンクの隙間を 10px 以上開けてください。
6.3.4.5.2. 処理アイコンの表現方法と実装例¶
処理リンク/処理アイコンの配置の表現は以下の 3 通りあります。
表現方法 | |
---|---|
1 | アイコン |
2 | アイコン+文字リンク |
3 | 文字リンク |
以下は 処理リンク/処理アイコンを 1 つ並べた場合と、2 つ並べた場合の実装例です。
ml-5、ml-10 は空白を設けるための調整用です。必要に応じて使用します。
複数配置する場合や、一覧表の左上に配置する場合は、CSS Module List の操作リストエリア「.imui-operation-list」 の中に <ul> を使って記述します。
6.3.4.5.2.1. 1 アイコン¶
以下のとおり HTML コーディングを行います。
- 1 つの場合
1 <a href="AA" title="BB"><span class="CC"></span></a>
- 2 つの場合
1 2 3 4 5 6 <div class="imui-operation-list"> <ul> <li><a href="AA" class="ml-5" title="BB"><span class="CC"></span></a></li> <li><a href="AA" class="ml-10" title="BB"><span class="CC"></span></a></li> </ul> </div>
AA 遷移先を指定 BB ツールチップの表示内容 CC CSS Sprite の class 指定 注意
アイコンのみの表示の場合、ツールチップを指定しましょう。 国によって、記号やジェスチャの考え方が異なるため、誤解を招かないための対策としてください。
6.3.4.5.2.2. 2 アイコン+文字リンク¶
以下のとおり HTML コーディングを行います。
- 1 つの場合
1 <a href="AA" class="mr-5"><span class="BB mr-5"></span>CC</a>
- 2 つの場合
1 2 3 4 5 6 <div class="imui-operation-list"> <ul> <li><a href="AA" class="ml-5"><span class="BB mr-5"></span>CC</a></li> <li><a href="AA" class="ml-10"><span class="BB mr-5"></span>CC</a></li> </ul> </div>
AA 遷移先を指定 BB CSS Sprite の class 指定 CC 文字リンクの表示内容
6.3.4.5.2.3. 3 文字リンク¶
以下のとおり HTML コーディングを行います。
- 1 つの場合
1 <a href="AA">BB</a>
- 2 つの場合
1 2 3 4 5 6 <div class="imui-operation-list"> <ul> <li><a href="AA" class="ml-5">BB</a></li> <li><a href="AA" class="ml-10">BB</a></li> </ul> </div>
AA 遷移先を指定 BB 文字リンクの表示内容
6.3.4.5.3. 文字リンクの CSS クラス¶
intra-mart Accel Platform は、文字リンクを 3 種類用意しています。通常、a タグを指定すると、自動で青字(hover で+下線)となります。よって、通常の文字リンクにおいては CSS クラス の指定は不要になります。ただし、表現箇所により黒字・青字をあえて指定する場合は、下記を指定してください。(例:メニューでグラデーションがあるので文字色不要 ⇒ class=”imui-unaccented” を指定してください)
種類 class 指定なし class=”imui-accent” class=”imui-unaccented” デフォルト 青字 青字 黒字 訪問済 青字 青字 黒字 未訪問 青字 青字 黒字 マウスオーバ 淡青字+下線 淡青字+下線 濃灰色字+下線 アクティブ 淡青字+下線 淡青字+下線 濃灰色字+下線 コラム
ツールバーでは、文字リンクは黒字になります。青字にしたい場合は、a タグにclass=”imui-accent”を指定します。
1 <a href="AA" class="imui-accent">BB</a>以下の外部ドキュメントにて、情報公開しています。