Blazor 라디오 및 라디오 그룹

    Ignite UI for Blazor 하면 사용자는 나란히 나열된 사용 가능한 옵션 세트에서 단일 옵션을 선택할 수 있습니다.

    Ignite UI for Blazor Radio Example

    Usage

    ​IgbRadio 및 IgbRadioGroup 사용하기 전에 다음과 같이 등록해야 합니다.

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(
  typeof(IgbRadioModule),
  typeof(IgbRadioGroupModule)
);

    또한 IgbRadio 및 IgbRadioGroup 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치되어야 합니다.

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

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio>Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    [!WARNING] The IgbRadio component doesn't work with the standard <form> element. Use IgbForm instead.

    Examples

    Label

    ​IgbRadio에 의미 있는 라벨을 제공하려면 여는 태그와 닫는 태그 사이에 텍스트를 배치하면 됩니다.

    <IgbRadio>Apple</IgbRadio>

    라벨을 위치 앞 또는 뒤에 배치해야 하는지 지정할 수 있습니다. IgbRadio 버튼을 설정하여 label-position 기인하다. 허용되는 값은 다음과 같습니다. before 그리고 after (기본):

    <IgbRadio LabelPosition="@RadioLabelPosition.Before">Apple</IgbRadio>

    ​IgbRadio는 외부 요소로 레이블을 지정할 수도 있습니다. 이 경우 사용자는 필요에 따라 라벨의 위치와 스타일을 지정할 수 있는 모든 권한을 갖게 됩니다.

    <span id="radio-label">Label</span>
<IgbRadio AriaLabelledBy="radio-label" />

    Checked

    ​checked 속성을 사용하여 라디오를 켤 수 있습니다.

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio Checked="true">Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Invalid

    ​invalid 속성을 사용하여 라디오를 잘못된 것으로 표시할 수 있습니다.

    <IgbRadio Invalid="true" />

    Disabled

    ​disabled 속성을 사용하여 라디오를 비활성화할 수 있습니다.

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio Disabled="true">Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Group Alignment

    ​IgbRadioGroup 사용하면 alignment 속성을 사용하여 포함된 라디오 버튼의 배치 방향을 쉽게 변경할 수 있습니다. 허용되는 값은 vertical (기본값) 및 horizontal 입니다.

    <IgbRadioGroup Alignment="@RadioGroupAlignment.Horizontal">
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio>Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Forms

    당신은 사용할 수 있습니다 name 그리고 value 라디오를 사용할 때의 속성 IgbForm.

    <IgbRadioGroup>
    <IgbRadio Name="fruit" Value="apple">Apple</IgbRadio>
    <IgbRadio Name="fruit" Value="banana">Banana</IgbRadio>
    <IgbRadio Name="fruit" Value="mango">Mango</IgbRadio>
    <IgbRadio Name="fruit" Value="orange">Orange</IgbRadio>
</IgbRadioGroup>

    Styling

    ​IgbRadio 구성요소는 여러 CSS 부분(base, control 및 label)을 노출하여 스타일을 완전히 제어할 수 있도록 합니다. 전역 팔레트 색상을 수정하여 라디오 구성 요소의 색상을 변경할 수도 있습니다.

    :root {
    --ig-primary-h: 60deg;
    --ig-primary-s: 100%;
    --ig-primary-l: 25%;
}

igc-radio::part(control) {
    --size: 18px;
}

    API References

    Additional Resources