Blazor 아이콘 버튼 개요

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

    Blazor Icon Button Example

    Usage

    Before using the IgbIconButton, you need to register it as follows:

    // in Program.cs file

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

    You will also need to link an additional CSS file to apply the styling to the IgbIconButton component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

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

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

    Examples

    Variant

    Similar to the regular button components, the icon button supports several variants - flat (default), contained, and outlined; To change the icon button type set the variant attribute of the icon button.

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

    크기

    The size of the button can be changed by utilizing the --ig-size CSS variable to any of the three supported sizes: --ig-size-small, --ig-size-medium, --ig-size-large(default).

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

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

    Type

    The icon button component will change its internal structure from <button> to an <a> type element when the href attribute is set. In that case the icon button can be thought of as a regular link. Setting the href attribute will allow you to also set the rel, target, and download attributes of the icon button.

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

    Mirrored

    Some icons need to look a little different when used in Right-to-Left(RTL) mode. For that reason we provide a mirrored attribute that, when set, flips the icon button horizontally.

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

    Styling

    The IgbIconButton component exposes two CSS parts - base and icon that allow you to style the wrapping element (<button> or <a>) and the wrapped <igc-icon> element.

    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