Tinyrack

Radio

상호 배타적인 라디오 그룹 안에서 옵션 하나를 제공해요.

상호 배타적인 라디오 그룹 안에서 옵션 하나를 제공해요.

핵심 속성

속성설명
선택그룹의 값이 이 value와 같을 때 선택돼요. 라디오가 스스로 상태를 바꾸지 않고 그룹이 바꿔요.
레이블label은 글리프 옆에 그려지고 탭 영역과 시맨틱 노드를 하나로 묶어요. 복합 레이블은 기본적으로 글리프를 본문 첫 줄에 맞춰요. 텍스트가 아닌 콘텐츠에는 TRRadioLabelAlignment.center를 선택하고, 텍스트 스타일은 TRText로 지정하세요.
크기uiSize는 TRUiSize.md, TRUiSize.lg를 받고 기본값은 md예요. 주변 컨트롤의 밀도에 맞추세요.
사용 가능 여부disabled와 readOnly는 그룹이 정한 값과 함께 적용돼요. readOnly는 포커스와 값을 유지하고, disabled는 조작을 막고 옵션을 흐리게 만들어요.
키보드네이티브 라디오처럼 Space를 뗄 때 포커스된 옵션이 선택돼요. 옵션 사이 이동은 TRRadioGroup이 담당해요.

라디오는 선택 값을 소유하는 TRRadioGroup 안에서만 의미가 있어요. 각 옵션에는 그룹 안에서 고유한 value와 읽고 누를 수 있는 label을 지정하세요. 켜고 끄는 단독 컨트롤이 필요하면 TRCheckbox나 TRSwitch를 사용해요.

설치

패키지를 추가한 뒤 공개 라이브러리를 가져오세요.

flutter pub add tinyrack_ui
import 'package:tinyrack_ui/tinyrack_ui.dart';

플레이그라운드

사용법

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

TRRadioGroup(
  defaultValue: 'weekly',
  onValueChange: setSchedule,
  children: const [
    TRRadio(
      value: 'weekly',
      label: TRText('매주', variant: TRTextVariant.bodySm),
    ),
    TRRadio(
      value: 'monthly',
      label: TRText('매월', variant: TRTextVariant.bodySm),
    ),
  ],
)

예시

선택 안 함과 선택함 고유 링크

선택은 그룹이 가진 값과의 관계에서만 의미가 있으니, 한 그룹 안에서 두 상태를 함께 비교해요.

작게, 보통으로, 크게 고유 링크

옵션 주변 컨트롤의 밀도에 맞춰 md and lg 중에서 고르세요.

편집 가능, 읽기 전용, 비활성 고유 링크

나머지와 상태가 다른 옵션에만 사용 가능 여부를 지정하세요. 전부 같다면 그룹에 한 번만 지정해요.

API

TRRadio 속성

Prop타입 / 기본값용도
valueString · required그룹 안에서 옵션을 구분해요. 고유하고 변하지 않는 값을 쓰세요.
labelWidget? · null글리프 옆에 그려지고 탭 대상과 시맨틱 노드를 하나로 합쳐요. 지정하지 않으면 글리프만 보여요.
uiSizeTRUiSize · TRUiSize.md글리프와 표시점의 크기를 정해요.
disabledbool · false그룹 값에 더해 이 옵션의 조작을 막아요. 비활성 옵션은 화살표 키가 건너뛰어요.
readOnlybool · false포커스와 값을 그대로 유지하면서 변경만 막아요.
invalidbool · false위험 상태 테두리를 그려요. 직접 검증 결과로 넘기세요. 위젯이 스스로 설정하지 않아요.
focusNode, autofocusFocusNode? · null, bool · falsefocusNode를 직접 넘기면 그룹이 이 옵션에 배정한 노드를 대신해요.