글리프
wijmo.css 파일에는 순수한 CSS로 정의된 여러 글리프가 포함되어 있습니다. 글리프는 Wijmo 컨트롤 및 확장 프로그램에서 사용되며 응용 프로그램에서도 이를 사용할 수 있습니다.
CSS를 사용하여 글리프를 정의하면 추가 글꼴 또는 이미지 파일을 배포 할 필요가 없으며 현재 테마에서 정의한 전경색 및 글꼴 크기를 사용하여 이미지를 렌더링 할 수 있습니다.
응용 프로그램에서 Wijmo 글리프를 사용하려면 <span> 요소를 마크업에 추가하고 해당 클래스를 글리프 이름으로 설정하십시오. 예 :
<span class="wj-glyph-diamond"></span>CSS를 사용하여 Wijmo 컨트롤에 사용된 글리프의 모양을 사용자 정의 할 수 있습니다. 예를 들어 아래 CSS를 사용하여 FlexGrid에서 사용하는 연필 모양의 모양을 숨기거나 수정하여 편집 모드의 행을 나타낼 수 있습니다.:
/* hide the pencil glyph in FlexGrid controls */
.wj-flexgrid .wj-glyph-pencil {
display: none;
}
/* replace the pencil glyph in FlexGrid controls with a custom image */
.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 |
|
|
calendar |
|
|
check |
|
|
circle |
|
|
clipboard |
|
|
clock |
|
|
diamond |
|
|
dimension |
|
|
down |
|
|
down-left |
|
|
down-right |
|
|
drag |
|
|
file |
|
|
filter |
|
|
left |
|
|
measure |
|
|
minus |
|
|
pencil |
|
|
pin |
|
|
plus |
|
|
right |
|
|
square |
|
|
step-backward |
|
|
step-forward |
|
|
up |
|
|
up-left |
|
|
up-right |
|
|
