Blazor 버튼 개요

    The Blazor Button Component lets you enable clickable elements that trigger actions in your Blazor app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the Blazor Button OnClick event, toggle the Blazor button, disable the Blazor button, and more.

    Blazor Button Example

    Usage

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

    // in Program.cs file

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

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

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

    <IgbButton />

    Prefix / Suffix

    With prefix and suffix slots of the IgbButton component, we can add different content before and after the main content of the button.

    <IgbButton Variant="@ButtonVariant.Contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</IgbButton>

    Type

    The button component will change its internal structure from a <button> to an <a> type element when the Href attribute is set. In that case the 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. In the case when the button component uses an actual <button> element internally, we can specify its DisplayType by setting the property to any of the following values:

    • Submit - when we want to submit the form data
    • reset - when we want to reset form data to its initial values
    • button - when we want to add button with a custom functionality anywhere on a webpage

    Button Variants

    Contained Button

    Use the Variant attribute to add a simple contained button in your component template. Note that if you do not set variant, by default it will be set to contained.

    <IgbButton Variant="@ButtonVariant.Contained" />

    Outlined Button

    All you have to do to create an outlined button is to change the value of the Variant property:

    <IgbButton Variant="@ButtonVariant.Outlined" />

    Flat Button

    Analogically, we can switch to flat variant.

    <IgbButton Variant="@ButtonVariant.Flat" />

    Floating Action Button

    We can create a floating action button by setting the Variant property to fab:

    <IgbButton Variant="@ButtonVariant.Fab" />

    Button Sizing

    Users can change the size of the IgbButton using the --ig-size CSS variable. In the following example, we will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the button.

    <IgbRadioGroup id="radioGroup" Alignment="ContentOrientation.Horizontal" >
    <IgbRadio Value="small" LabelPosition="RadioLabelPosition.After" @onclick="OnSmallClick">Small</IgbRadio>
    <IgbRadio Value="medium" LabelPosition="RadioLabelPosition.After" @onclick="OnMediumClick">Medium</IgbRadio>
    <IgbRadio Value="large" LabelPosition="RadioLabelPosition.After" Checked="true" @onclick="OnLargeClick">Large</IgbRadio>
</IgbRadioGroup>

@code {
    private SizableComponentSize SizableComponentSize = SizableComponentSize.Large;

    protected override void OnInitialized()
    {
    }

    public void OnSmallClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Small;
    }

    public void OnMediumClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Medium;
    }

    public void OnLargeClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Large;
    }
}

    위 코드를 구현한 결과는 다음과 같아야 합니다.

    Download

    Setting the Download property will prompt the user to save the linked URL instead of navigating to it.

    <IgbButton Variant="@ButtonVariant.Contained" Download="Url" Href="https://ko.infragistics.com/" Target="@ButtonBaseTarget._blank">
    Download
</IgbButton>

    Styling

    The IgbButton exposes three CSS parts which we can use for styling:

    이름 설명
    base igc-button 구성 요소의 기본 button 요소입니다.
    prefix igc-button 구성 요소의 접두사 컨테이너입니다.
    suffix igc-button 구성 요소의 접미사 컨테이너입니다.

    The base CSS part allows us to style the wrapped element (<button> or <a>).

    igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}

    API References

    Additional Resources