Blazor 라디오 & 라디오 그룹

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

    Ignite UI for Blazor Radio Example

    Usage

    와 theIgbRadio를 사용하기IgbRadioGroup 전에 다음과 같이 등록해야 합니다:

    // in Program.cs file

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

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

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

    사용하기 가장 간단한 방법은IgbRadio 다음과 같습니다:

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

    이 컴포넌트는IgbRadio 표준<form> 요소와 호환되지 않습니다. 대신 사용Form 하세요.

    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="@ContentOrientation.Horizontal">
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio>Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Forms

    라디오name를 사용할 때 ANDvalue 속성을 사용할Form 수 있습니다.

    <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, andlabel)을 노출하여 스타일링을 완전히 제어할 수 있게 합니다.

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

igc-radio-group {
  padding: 12px;
}

igc-radio::part(checked)::after {
  background-color: var(--ig-success-500);
}

igc-radio::part(label) {
  color: var(--ig-secondary-800);
}

    API References

    Additional Resources