Web Components 그리드 아이콘 사용자 지정

    Ignite UI for Web Components IgcGridComponent 아이콘은 노출된 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',
});

    Web Components 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

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