React Grid 사용자 정의 아이콘

    Ignite UI for React IgrGrid 아이콘은 노출된 API 메서드를 사용하여 다른 컬렉션 집합의 사용자 지정 아이콘을 사용하도록 사용자 지정할 수 있습니다.

    • 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 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

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

    그리드

    상 설명
    add 필터 항목을 추가하기 위해 excel-filter 메뉴에서 사용됩니다.
    arrow_back 열을 뒤로 이동하기 위해 다양한 UI 요소에서 사용됩니다.
    arrow_drop_down 토글 가능한 메뉴를 나타내기 위해 다양한 버튼에 사용됩니다.
    arrow_forward 열을 앞으로 이동하기 위해 다양한 UI 요소에서 사용됩니다.
    취소 작업을 취소하기 위해 다양한 UI 요소에 사용됩니다.
    chevron_right Excel 스타일 필터링과 같이 확장 가능한 메뉴를 나타내는 데 사용됩니다.
    닫다 확장된 메뉴를 닫는 데 사용됩니다.
    확인하다 작업을 확인하는 데 사용됩니다.
    drag_indicator 항목을 끌 수 있음을 나타내는 핸들을 표시하는 데 사용됩니다.
    오류 잘못된 데이터 입력을 나타내기 위해 편집 가능한 셀에 사용됩니다.
    expand_more Excel 필터링 메뉴에서 더 많은 필터 추가를 나타내는 데 사용됩니다.
    file_dowload 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 피벗 데이터 선택기에서 사용됩니다.

    페이지네이터

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

    액션 스트립

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

    API References

    Additional Resources

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