3.4.5. 処理リンク／処理アイコン¶
本章では、処理リンク／処理アイコンについて説明します。ツールバー の 処理リンク／処理アイコン配置方法まとめ ではツールバーに関してのみ記述しています。本章では、汎用的に使用する処理リンク／処理アイコンを説明します。
3.4.5.1. 配置ルール¶
- 処理アイコン／処理リンクは、一覧テーブルの処理アイコン群、一覧テーブルのセル、入力フォーム等に使用します。
- 配置の優先度は、左から重要度、頻度などが高いものから順番に配置します。
- 処理アイコン／処理リンクの周りは、誤ってクリックしないよう空白を設けましょう。
- 反対の意味の処理アイコン／処理リンクを配置する場合
3.4.5.2. 処理アイコンの表現方法と実装例¶
処理リンク／処理アイコンの配置の表現は以下の 3 通りあります。
| 表現方法 | |
|---|---|
| 1 | アイコン |
| 2 | アイコン＋文字リンク |
| 3 | 文字リンク |
以下は 処理リンク／処理アイコンを 1 つ並べた場合と、2 つ並べた場合の実装例です。
ml-5、ml-10 は空白を設けるための調整用です。必要に応じて使用します。
複数配置する場合や、一覧表の左上に配置する場合は、CSS Module List の操作リストエリア「.imui-operation-list」 の中に <ul> を使って記述します。
3.4.5.2.1. 1 アイコン¶
以下のとおり HTML コーディングを行います。
- 1 つの場合
- 2 つの場合
AA 遷移先を指定 BB ツールチップの表示内容 CC CSS Sprite の class 指定 注意
アイコンのみの表示の場合、ツールチップを指定しましょう。 国によって、記号やジェスチャの考え方が異なるため、誤解を招かないための対策としてください。
3.4.5.2.2. 2 アイコン＋文字リンク¶
以下のとおり HTML コーディングを行います。
- 1 つの場合
- 2 つの場合
AA 遷移先を指定 BB CSS Sprite の class 指定 CC 文字リンクの表示内容
3.4.5.2.3. 3 文字リンク¶
以下のとおり HTML コーディングを行います。
- 1 つの場合
- 2 つの場合
AA 遷移先を指定 BB 文字リンクの表示内容
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”を指定します。