wijmo.css ファイルには、複数のグリフが純粋なCSSとして定義されています。これらのグリフは、Wijmoコントロールおよび拡張機能によって使用され、アプリケーションでも使用できます。
CSSを使用してグリフを定義すると、余分なフォントファイルや画像ファイルを配布する必要がなくなり、また現在のテーマによって定義されている前景色やフォントサイズを使用して画像がレンダリングされることが保証されます。
アプリケーションでWijmoグリフを使用するには、マークアップに要素を追加して、そのクラスにグリフ名を設定します。次に例を示します。
<span class="wj-glyph-diamond"></span>
CSSを使用して、Wijmoコントロール内で使用するグリフの外観をカスタマイズできます。たとえば、次のCSSを使用すると、FlexGridで行が編集モードであることを示すために使用される鉛筆グリフを非表示にしたり、その外観を変更することができます。
/* FlexGridコントロール内の鉛筆グリフを非表示にします */
.wj-flexgrid .wj-glyph-pencil {
display: none;
}
/* FlexGridコントロール内の鉛筆グリフをカスタム画像に置き換えます */
.wj-flexgrid .wj-glyph-pencil {
background-image:url('../images/my-pencil.png');
background-repeat: round;
border: 0;
opacity: 1;
}
.wj-flexgrid .wj-glyph-pencil:after {
display: none;
}
次の表に、wijmo.cssファイルで定義されているグリフを示します。
| 名前 | グリフ | CSSクラス |
|---|---|---|
| asterisk | wj-glyph-asterisk |
|
| calendar | wj-glyph-calendar |
|
| check | wj-glyph-check |
|
| circle | wj-glyph-circle |
|
| clipboard | wj-glyph-clipboard |
|
| clock | wj-glyph-clock |
|
| diamond | wj-glyph-diamond |
|
| dimension | wj-glyph-dimension |
|
| down | wj-glyph-down |
|
| down-left | wj-glyph-down-left |
|
| down-right | wj-glyph-down-right |
|
| drag | wj-glyph-drag |
|
| file | wj-glyph-file |
|
| filter | wj-glyph-filter |
|
| left | wj-glyph-left |
|
| measure | wj-glyph-measure |
|
| minus | wj-glyph-minus |
|
| pencil | wj-glyph-pencil |
|
| pin | wj-glyph-pin |
|
| plus | wj-glyph-plus |
|
| right | wj-glyph-right |
|
| square | wj-glyph-square |
|
| step-backward | wj-glyph-step-backward |
|
| step-forward | wj-glyph-step-forward |
|
| up | wj-glyph-up |
|
| up-left | wj-glyph-up-left |
|
| up-right | wj-glyph-up-right |