Web Components 라디오 & 라디오 그룹

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

Ignite UI for Web Components Radio Example

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioGroup {
  constructor() {
  }
}

new RadioGroup();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Radio Group</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample">
                <div style="width: 400px; border: 1px solid gainsboro">
                    <igc-radio-group>
                        <igc-radio name="fruit" value="apple">Apple</igc-radio>
                        <igc-radio name="fruit" value="banana" checked>Banana</igc-radio>
                        <igc-radio name="fruit" value="mango">Mango</igc-radio>
                        <igc-radio name="fruit" value="orange">Orange</igc-radio>
                    </igc-radio-group>
                </div>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

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

npm install igniteui-webcomponents
cmd

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

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
ts

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>
html

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

Examples

Label

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

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

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

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

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

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

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioLabel {
  constructor() {
  }
}

new RadioLabel();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio-group>
            <igc-radio name="fruit" label-position="before" value="apple">Apple</igc-radio>
            <div style="display: flex; align-items: center">
              <span id="radio-label">Label</span>
              <igc-radio
                name="fruit"
                label-position="before"
                aria-labelledby="radio-label"
                value="orange"
              ></igc-radio>
            </div>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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>
html

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioGroup {
  constructor() {
  }
}

new RadioGroup();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Radio Group</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample">
                <div style="width: 400px; border: 1px solid gainsboro">
                    <igc-radio-group>
                        <igc-radio name="fruit" value="apple">Apple</igc-radio>
                        <igc-radio name="fruit" value="banana" checked>Banana</igc-radio>
                        <igc-radio name="fruit" value="mango">Mango</igc-radio>
                        <igc-radio name="fruit" value="orange">Orange</igc-radio>
                    </igc-radio-group>
                </div>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Invalid

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

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

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

defineComponents(IgcRadioComponent);
export class RadioInvalid {
  constructor() {
  }
}

new RadioInvalid();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio invalid>Invalid</igc-radio>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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>
html

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioDisabled {
  constructor() {
  }
}

new RadioDisabled();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Disabled</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio-group>
            <igc-radio name="fruit">Apple</igc-radio>
            <igc-radio name="fruit" disabled>Banana</igc-radio>
            <igc-radio name="fruit">Mango</igc-radio>
            <igc-radio name="fruit">Orange</igc-radio>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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>
html

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioGroupAlignment {
  constructor() {
  }
}

new RadioGroupAlignment();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group Alignment</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 430px; border: 1px solid gainsboro">
          <igc-radio-group alignment="horizontal">
            <igc-radio name="fruit">Apple</igc-radio>
            <igc-radio name="fruit" checked>Banana</igc-radio>
            <igc-radio name="fruit">Mango</igc-radio>
            <igc-radio name="fruit">Orange</igc-radio>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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>
html

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);
}
css

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioStyling {
  constructor() {
  }
}

new RadioStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio-group>
            <igc-radio name="fruit">Apple</igc-radio>
            <igc-radio name="fruit" checked>Banana</igc-radio>
            <igc-radio name="fruit">Mango</igc-radio>
            <igc-radio name="fruit">Orange</igc-radio>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
:root {
    --ig-primary-h: 60deg;
    --ig-primary-s: 100%;
    --ig-primary-l: 25%;
}

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