Radio라디오

라디오는 사용자가 옵션 그룹 중에서 하나를 선택할 수 있도록하며, 한 번에 하나의 옵션만 선택되도록합니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/radio-group.js';
import 'mdui/components/radio.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { RadioGroup } from 'mdui/components/radio-group.js';
import type { Radio } from 'mdui/components/radio.js';

사용 예시:

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

예시

선택 상태

<mdui-radio-group> 컴포넌트의 value 속성값은 현재 선택된 <mdui-radio> 컴포넌트의 value 속성값입니다. <mdui-radio-group> 컴포넌트의 value 속성값을 업데이트하여 현재 선택된 라디오를 전환할 수도 있습니다.

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

소스

<mdui-radio> 컴포넌트를 단독으로 사용할 수 있으며, 이때는 checked 속성으로 선택 상태를 읽고 수정할 수 있습니다.

Radio

<mdui-radio checked>Radio</mdui-radio>

소스

비활성화 상태

<mdui-radio-group> 컴포넌트에 disabled 속성을 추가하면 전체 라디오 그룹을 비활성화할 수 있습니다.

Chinese

English

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

소스

특정 라디오를 비활성화하려면 <mdui-radio> 컴포넌트에 disabled 속성을 추가합니다.

Chinese

English

<mdui-radio-group>
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english" disabled>English</mdui-radio>
</mdui-radio-group>

소스

아이콘

unchecked-icon 및 checked-icon 속성을 설정하여 각각 미선택 및 선택 상태일 때 라디오의 Material Icons 아이콘을 지정할 수 있습니다. unchecked-icon 및 checked-icon 슬롯을 통해서도 설정할 수 있습니다.

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Chinese</mdui-radio>
  <mdui-radio value="english">
    <mdui-icon slot="unchecked-icon" name="check_box_outline_blank"></mdui-icon>
    <mdui-icon slot="checked-icon" name="lock"></mdui-icon>
    English
  </mdui-radio>
</mdui-radio-group>

소스

`mdui-radio-group` API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`disabled`	`disabled`	`boolean`	`false`
이 컴포넌트를 비활성화할지 여부를 설정합니다.
`form`	`form`	`string`	-
연결된 `<form>` 요소입니다. 이 속성 값은 동일한 페이지에 있는 `<form>` 요소의 `id`여야 합니다. 이 속성을 지정하지 않으면 이 요소는 `<form>` 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 `<form>` 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
`name`	`name`	`string`	`''`
라디오 그룹의 이름이며, 폼 데이터와 함께 제출됩니다.
`value`	`value`	`string`	`''`
라디오 그룹에서 현재 선택된 값이며, 폼 데이터와 함께 제출됩니다.
	`defaultValue`	`string`	`''`
기본 선택 값입니다. 폼을 재설정할 때 이 기본값으로 재설정됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
`required`	`required`	`boolean`	`false`
폼 제출 시 라디오 중 하나를 반드시 선택해야 하는지 여부를 설정합니다.
	`validity`	`ValidityState`	-
폼 유효성 검사 상태 객체입니다. 자세한 내용은 `ValidityState`를 참조하십시오.
	`validationMessage`	`string`	-
폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.

메서드

이름	매개변수	반환값
`checkValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다.
`reportValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다. 유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
`setCustomValidity`	`message: string`	`void`
사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.

이벤트

이름
`change`
선택된 값이 변경될 때 발생합니다.
`input`
선택된 값이 변경될 때 발생합니다.
`invalid`
폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.

Slots

이름
기본
`<mdui-radio>` 요소

`mdui-radio` API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`value`	`value`	`string`	`''`
현재 라디오의 값입니다.
`disabled`	`disabled`	`boolean`	`false`
현재 라디오를 비활성화할지 여부를 설정합니다.
`checked`	`checked`	`boolean`	`false`
현재 라디오가 선택되었는지 여부를 설정합니다.
`unchecked-icon`	`uncheckedIcon`	`string`	-
선택되지 않은 상태의 Material Icons 아이콘 이름입니다. `slot="unchecked-icon"`을 통해서도 설정할 수 있습니다.
`checked-icon`	`checkedIcon`	`string`	-
선택됨 상태의 Material Icons 아이콘 이름입니다. `slot="checked-icon"`을 통해서도 설정할 수 있습니다.
`autofocus`	`autofocus`	`boolean`	`false`
페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
`tabindex`	`tabIndex`	`number`	-
Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.

메서드

이름	매개변수	반환값
`click`		`void`
마우스 클릭을 시뮬레이션합니다.
`focus`	`options: FocusOptions` (선택사항)	`void`
현재 요소에 포커스를 설정합니다. 객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다: `preventScroll`: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 `true`로 설정하십시오.
`blur`		`void`
현재 요소에서 포커스를 제거합니다.

이벤트

이름
`focus`
포커스를 얻었을 때 발생합니다.
`blur`
포커스를 잃었을 때 발생합니다.
`change`
해당 라디오를 선택할 때 발생합니다.

Slots

이름
기본
텍스트 콘텐츠
`unchecked-icon`
선택되지 않은 상태의 아이콘
`checked-icon`
선택됨 상태의 아이콘

CSS Parts

이름
`control`
왼쪽 아이콘 컨테이너
`unchecked-icon`
선택되지 않은 상태의 아이콘
`checked-icon`
선택됨 상태의 아이콘
`label`
텍스트 콘텐츠

이전 장

NavigationRail 내비게이션 레일

다음 장

RangeSlider 범위 슬라이더