Web Components 라디오 & 라디오 그룹

    Ignite UI for Web Components Radio 구성 요소를 사용하면 나란히 나열된 사용 가능한 옵션 집합에서 단일 옵션을 선택할 수 있습니다.

    Ignite UI for Web Components Radio Example

    Usage

    먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

    npm install igniteui-webcomponents

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

    import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);

    Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    사용을 IgcRadioComponent 시작하는 가장 간단한 방법은 다음과 같습니다.

    <igc-radio-group>
  <igc-radio>Apple</igc-radio>
  <igc-radio>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>

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

    Examples

    Label

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

    <igc-radio>Apple</igc-radio>

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

    <igc-radio label-position="before">Apple</igc-radio>

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

    <span id="radio-label">Label</span>
<igc-radio aria-labelledby="radio-label"></igc-radio>

    Checked

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

    <igc-radio-group>
  <igc-radio>Apple</igc-radio>
  <igc-radio checked>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>

    Invalid

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

    <igc-radio invalid></igc-radio>

    Disabled

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

    <igc-radio-group>
  <igc-radio>Apple</igc-radio>
  <igc-radio disabled>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>

    Group Alignment

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

    <igc-radio-group alignment="horizontal">
  <igc-radio>Apple</igc-radio>
  <igc-radio>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>

    Forms

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

    <igc-radio-group>
  <igc-radio name="fruit" value="apple">Apple</igc-radio>
  <igc-radio name="fruit" value="banana">Banana</igc-radio>
  <igc-radio name="fruit" value="mango">Mango</igc-radio>
  <igc-radio name="fruit" value="banana">Orange</igc-radio>
</igc-radio-group>

    Styling

    구성 요소는 IgcRadioComponent 여러 CSS 부분(base, control, and label)을 노출하여 스타일을 완전히 제어할 수 있도록 합니다.

    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