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

    ​prefix그리고suffix 슬롯IgbButton 컴포넌트에서는 버튼의 주요 콘텐츠 앞뒤에 다른 콘텐츠를 추가할 수 있습니다.

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

    Type

    속성이<button> 설정되면 버튼 컴포넌트는 내부 구조를 a<a>에서 타입 요소로Href 변경합니다. 이 경우 버튼은 일반 링크로 생각할 수 있습니다. 속성을 설정하면Href 그리고 속성도 설정할Rel​Target​Download 수 있습니다. 버튼 컴포넌트가 내부적으로 실제<button> 요소를 사용할 경우, 속성 값을 다음 중 하나로 설정하여 지정할DisplayType 수 있습니다:

    • Submit- 양식 데이터를 제출할 때
    • reset- 폼 데이터를 초기 값으로 리셋하고 싶을 때
    • button- 웹페이지 어디에나 커스텀 기능이 있는 버튼을 추가하고 싶을 때

    Button Variants

    Contained Button

    속성 기능을Variant 사용해 컴포넌트 템플릿에 간단한 포함된 버튼을 추가하세요. 변형을 설정하지 않으면 기본적으로 '포함된'으로 설정됩니다.

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

    Outlined Button

    버튼을 만들기outlined 위해 해야 할 일은 속성의 값을 변경하는 것뿐입니다Variant:

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

    Flat Button

    비유적으로 변이로 전환flat 할 수 있습니다.

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

    Floating Action Button

    속성 설정을Variant​fab 통해 플로팅 액션 버튼을 만들 수 있습니다:

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

    Button Sizing

    사용자는IgbButton 사용--ig-size CSS 변수. 다음 예시에서는 모든 크기 값을 표시하는 라디오 버튼을 추가할 것입니다. 이렇게 하면 선택될 때마다 버튼 크기를 변경할 수 있습니다.

    <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

    속성을 설정하면Download 사용자가 링크된 URL을 저장하라는 메시지가 나옵니다.

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

    Styling

    이 문서는IgbButton 스타일링에 사용할 수 있는 세 가지 CSS 부품을 공개합니다:

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

    CSS 부분은base 랩된 요소(or<button>)<a>를 스타일링할 수 있게 해줍니다.

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

    API References

    Additional Resources