[]
        
(Showing Draft Content)

グリフ

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