React Grid 사용자 정의 아이콘

    The Ignite UI for React IgrGrid icons can be customized to use custom icons from a different collection set using the exposed API methods:

    • registerIconFromText
    • registerIcon
    • setIconRef

    아이콘을 등록하면 로컬로 캐시되므로 구성 요소 간에 재사용할 수 있으며, 이 아이콘은 이름과 컬렉션 이름으로 참조됩니다. 참조를 설정하면 해당 아이콘을 이름으로 참조할 때 어떤 아이콘, 어떤 컬렉션에서 사용되는지가 변경됩니다.

    // Add a new 'material' icon called 'filter_list' from string
registerIconFromText("filter_list", '<svg>...</svg>', "material");

// Add a new 'material' icon called 'my-filter_list' from svg url
registerIcon("filter_list", "url" , "material")

// Sets the icon reference to the new registered icon.
setIconRef('filter_list', 'default', {
            name: 'filter_list',
            collection: 'material',
});

    React Customize Icons Example

    다음 샘플은 원래 재질 아이콘에서 사용자 정의 글꼴 멋진 svg 아이콘으로 전환하고 다시 재질로 전환하는 방법을 보여줍니다.

    Internal Icons

    다음은 모든 내부 아이콘을 나열합니다. Alias는 참조할 수 있는 아이콘의 이름입니다. Target Icon은 내부 아이콘 이름이고, Target Collection은 아이콘이 내부적으로 등록된 컬렉션입니다.

    별명 대상 아이콘 타겟 컬렉션
    **추가*- add material
    **add_child*- 자식 추가 imx-icons
    **add_row*- 행 추가 imx-icons
    **arrow_back*- arrow_back material
    **arrow_drop_down*- arrow_drop_up material
    **arrow_forward*- arrow_forward material
    **arrow_next*- chevron_right material
    **arrow_prev*- chevron_left material
    **case_sensitive*- case-sensitive imx-icons
    **carousel_next*- arrow_forward material
    **carousel_prev*- arrow_back material
    **chevron_left*- chevron_left material
    **chevron_right*- chevron_right material
    **시계*- access_time material
    **가까이*- 닫다 material
    **붕괴*- 확장_없음 material
    **확인*- 확인하다 material
    **date_range*- date_range material
    **삭제*- delete material
    **drag_indicator*- drag_indicator material
    **수정*- 편집하다 material
    **오류*- 오류 material
    **확장*- 확장_자세히 material
    **expand_more*- 확장_자세히 material
    **file_download*- file_download material
    **filter_all*- 모두 선택 imx-icons
    **filter_before*- 이전-이전 imx-icons
    **filter_contains*- 포함 imx-icons
    **filter_does_not_contain*- 포함하지 않음 imx-icons
    **filter_empty*- 비어 있음 imx-icons
    **filter_equal*- 같음 imx-icons
    **filter_false*- 거짓입니다. imx-icons
    **filter_greater_than*- 보다 큼 imx-icons
    filter_greater_than_or_equal 크거나 같음 imx-icons
    **filter_in*- IS-IN (인-인) imx-icons
    **filter_last_month*- 지난달 imx-icons
    **filter_last_year*- 지난해 imx-icons
    **filter_less_than*- 보다 작음 imx-icons
    **filter_less_than_or_equal*- 보다 작거나 같음 imx-icons
    **filter_next_month*- 다음 달 imx-icons
    **filter_next_year*- 내년 imx-icons
    **filter_not_empty*- 비어 있지 않음 imx-icons
    **filter_not_equal*- 같지 않음(not-equal) imx-icons
    **filter_not_null*- null이 아님 imx-icons
    **filter_null*- is-null (영문) imx-icons
    **filter_starts_with*- 다음으로 시작 imx-icons
    **filter_this_month*- 이달의 경우 imx-icons
    **filter_this_year*- 올해 imx-icons
    **filter_today*- 오늘 imx-icons
    **filter_true*- is-true (참) imx-icons
    **filter_yesterday*- 어제 imx-icons
    **first_page*- 첫 페이지 material
    **group_work*- 그룹 과제 material
    **숨으세요*- 가시성_꺼짐 material
    **import_export*- 수입 수출 material
    **input_collapse*- arrow_drop_up material
    **input_clear*- 분명한 material
    **input_expand*- arrow_drop_down material
    **jump_down*- 점프 다운 imx-icons
    **jump_up*- 점프 업 imx-icons
    **last_page*- 마지막 페이지 material
    **more_vert*- more_vert material
    **다음*- navigate_next material
    **핀*- 핀 왼쪽 imx-icons
    **이전 내용*- navigate_before material
    **새로고침*- 새로 고치다 material
    **삭제*- 취소 material
    **검색*- 찾다 material
    **선택*- 완료 material
    **쇼*- 시계 material
    **sort_asc*- arrow_upward material
    **sort_desc*- arrow_downward material
    **기능*- 함수 material
    **table_rows*- table_rows material
    **오늘*- calendar_today material
    **tree_collapse*- 확장_자세히 material
    **tree_expand*- chevron_right material
    **unfold_less*- 펼치지 않음 material
    **unfold_more*- unfold_more material
    **핀 해제*- 왼쪽 고정 해제 imx-icons
    **view_column*- view_column material

    다음은 구성 요소에서 사용하는 모든 아이콘에 대한 분석입니다.

    그리드

    상 설명
    **추가*- 필터 항목을 추가하기 위해 excel-filter 메뉴에서 사용됩니다.
    **arrow_back*- 열을 뒤로 이동하기 위해 다양한 UI 요소에서 사용됩니다.
    **arrow_drop_down*- 토글 가능한 메뉴를 나타내기 위해 다양한 버튼에 사용됩니다.
    **arrow_forward*- 열을 앞으로 이동하기 위해 다양한 UI 요소에서 사용됩니다.
    **취소*- 작업을 취소하기 위해 다양한 UI 요소에 사용됩니다.
    **chevron_right*- Excel 스타일 필터링과 같이 확장 가능한 메뉴를 나타내는 데 사용됩니다.
    **가까이*- 확장된 메뉴를 닫는 데 사용됩니다.
    **확인*- 작업을 확인하는 데 사용됩니다.
    **drag_indicator*- 항목을 끌 수 있음을 나타내는 핸들을 표시하는 데 사용됩니다.
    **오류*- 잘못된 데이터 입력을 나타내기 위해 편집 가능한 셀에 사용됩니다.
    **expand_more*- Excel 필터링 메뉴에서 더 많은 필터 추가를 나타내는 데 사용됩니다.
    **file_download*- Excel 필터 내보내기에서 사용됩니다.
    **filter_*- 다양한 필터링 피연산자에 사용됩니다.
    **group_work*- 그룹화 기준 끌어 놓기 영역에서 사용됩니다.
    **숨으세요*- 열을 숨기기 위해 다양한 UI 요소에서 사용됩니다.
    **import_export*- 이동을 위해 피벗 데이터 선택기에서 사용됩니다.
    **input_clear*- 입력 데이터를 지우기 위해 입력 필드에서 사용됩니다.
    **다음*- 필터링 행 메뉴에서 칩 사이를 탐색하는 데 사용됩니다.
    **핀*- 열 고정을 위해 다양한 UI 요소에서 사용됩니다.
    **이전 내용*- 필터링 행 메뉴에서 칩 사이를 탐색하는 데 사용됩니다.
    **삭제*- 다양한 UI 요소에서 제거 표시기로 사용됩니다.
    **새로고침*- 필터링 행 메뉴에서 필터를 다시 로드하는 데 사용됩니다.
    **선택*- 활성 선택을 나타내기 위해 다양한 UI 요소에서 사용됩니다.
    **쇼*- 열을 표시하기 위해 다양한 UI 요소에서 사용됩니다.
    **sort_asc*- 정렬 방향을 나타내기 위해 다양한 UI 요소에서 사용됩니다.
    **sort_desc*- 정렬 방향을 나타내기 위해 다양한 UI 요소에서 사용됩니다.
    **기능*- 피벗 그리드 및 데이터 선택기에서 사용됩니다.
    **table_rows*- 피벗 그리드 데이터 선택기에서 사용됩니다.
    **tree_collapse*- 나무와 같은 구조에서 세부 정보를 덜 표시하는 데 사용됩니다.
    **tree_expand*- 나무와 같은 구조에서 더 많은 세부 정보를 표시하는 데 사용됩니다.
    **핀 해제*- 열 고정을 위해 다양한 UI 요소에서 사용됩니다.
    **unfold_less*- 계층적 그리드에서 모든 행을 축소하는 데 사용됩니다.
    **unfold_more*- 계층적 그리드에서 모든 행을 확장하는 데 사용됩니다.
    **view_column*- 피벗 데이터 선택기에서 사용됩니다.

    Paginator

    상 설명
    first_page 첫 번째 페이지로 이동하는 데 사용되는 단추에서 사용됩니다.
    **last_page*- 마지막 페이지로 이동하는 데 사용되는 단추에서 사용됩니다.
    **이전 내용*- 이전 페이지로 이동하는 데 사용되는 단추에서 사용됩니다.
    **다음*- 다음 페이지로 이동하는 데 사용되는 단추에서 사용됩니다.

    Action Strip

    상 설명
    add_child 팝업 메뉴에서 사용됩니다.
    **add_row*- 팝업 메뉴에서 사용됩니다.
    more_vert 팝업 메뉴에서 사용됩니다.

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.