Blazor 아이콘 버튼 개요

    Ignite UI for Blazor Icon Button 구성 요소를 사용하면 개발자가 등록된 아이콘을 애플리케이션의 버튼으로 사용할 수 있습니다. 아이콘 구성 요소의 모든 기능을 제공하지만 버튼 구성 요소의 기능도 추가합니다.

    Blazor Icon Button Example

    Usage

    사용하기IgbIconButton 전에 다음과 같이 등록해야 합니다:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbIconButtonModule));

    스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbIconButton. 다음 내용은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 포함되어야 합니다:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbIconButton IconName="thumb-up" Collection="material" />

    Examples

    Variant

    일반 버튼 구성 요소와 유사하게, 아이콘 버튼은 여러 변형을 지원합니다 -flat(기본값),contained 그리고outlined; 아이콘 버튼 타입을 변경하려면 아이콘 버튼의 속성을 설정variant 하세요.

    <IgbIconButton IconName="search" Variant="@IconButtonVariant.Contained" Collection="material" />

    크기

    버튼 크기는 CSS 변수를--ig-size 사용해 지원되는 세 가지 크기 중 하나로 변경할 수 있습니다:--ig-size-small,--ig-size-medium (--ig-size-large기본값).

    igc-icon-button {
    --ig-size: var(--ig-size-medium);
}

    <IgbIconButton IconName="thumb-up" Collection="material" Size="@SizableComponentSize.Medium" />

    Type

    아이콘 버튼 컴포넌트는 속성이<button> 설정되면 내부 구조가 타<a> 입 요소로href 변경됩니다. 이 경우 아이콘 버튼은 일반 링크로 생각할 수 있습니다. 속성 설정은href 아이콘 버튼의 속성도 설정할rel​target​download 수 있게 해줍니다.

    <IgbIconButton IconName="thumb-up" Collection="material" Href="https://duckduckgo.com" Target="_blank" />

    Mirrored

    일부 아이콘은 오른쪽에서 왼쪽(RTL) 모드에서 약간 다르게 보여야 합니다. 그래서 설정 시 아이콘 버튼을 수평으로 뒤집는 속성을 제공합니다mirrored.

    <IgbIconButton IconName="thumb-up" Collection="material" Mirrored="true" />

    Styling

    컴포넌트는IgbIconButton 두 개의 CSS 파트base​icon를 노출시켜, 래핑 요소(<button>or<a>)와 랩된<igc-icon> 요소를 스타일링할 수 있게 해줍니다.

    igc-icon-button[variant="contained"]:not([disabled])::part(base) {
  padding: 12px;
  background-color: var(--ig-success-500);
}

igc-icon-button::part(icon) {
  --size: 22px;
  color: var(--ig-success-500-contrast);
}

    API References

    Additional Resources