VanillaFront

SliderField (슬라이더 필드)

Va.SliderField — 라벨 + 드래그 슬라이더Va.Slider가 순수 슬라이더라면, Va.SliderField는 그 위에 폼 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.Slider를 소유하는 Composition 구조.클래스: Va.SliderField — va_slider.js:941short name: sliderField상속: Va.Field (다른 Field 형제들과 같음)파일: va_slider.js (별도 파일 — import 필요)내부 컴포넌트: Va.Slider 인스턴스 (fieldComponent)isContainer: true1. 시작하기 전 — 별도 파일 importSlider와 마찬가지로 va_slider.js를 ..

Slider (슬라이더)

Va.Slider — 드래그로 값을 조절하는 슬라이더수치 범위 안에서 thumb(손잡이)를 드래그해서 값을 조절하는 컴포넌트. HTML 표준 를 감싸되, 진행 바 색상 커스텀, 숫자 입력창 병기, min/max 라벨 표시, thumb 위 값 표시 등을 옵션으로 제공합니다.클래스: Va.Slider — va_slider.js:28short name: slider상속: Va.PureField (Input·Combobox와 형제)파일: va_slider.js (별도 파일 — import 필요)isContainer: true1. 시작하기 전 — 별도 파일 importva.js나 va_component.js엔 포함 안 됨. 사용 전 반드시:import Va from '../../lib/va.js';import '..

RadioGroupField (라디오그룹 필드)

Va.RadioGroupField — 라벨 + 배타 선택 라디오 그룹Va.RadioGroup이 순수 배타 선택 그룹이라면, Va.RadioGroupField는 그 위에 폼 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.RadioGroup을 소유하는 Composition 구조. 실무에서 라디오를 쓸 때 가장 자주 만나게 되는 컴포넌트.클래스: Va.RadioGroupField — va_component.js:11343short name: radioGroupField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.RadioGroup 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-r..

RadioGroup (라디오 그룹)

Va.RadioGroup — 여러 라디오를 배타 선택으로 관리하는 그룹여러 옵션 중 하나만 선택되도록 자동 관리하는 컴포넌트. 각 Radio를 하드코딩하지 않고 데이터 배열로 선언해 한 번에 렌더링합니다. 값은 선택된 하나의 key로 다룹니다. CheckboxGroup과 완전히 대칭 구조지만 반환값이 배열이 아니라 단일 값이라는 게 결정적 차이.클래스: Va.RadioGroup — va_component.js:11106short name: radioGroup상속: Va.Component (PureField 아님)isContainer: true베이스 CSS: va-radio-group1. 기본 사용{ tagName: 'radioGroup', key: 'code', display: 'name..

RadioField (라디오 필드)

Va.RadioField — 라벨 + 단일 라디오 버튼 필드Va.Radio가 순수 라디오 버튼이라면, Va.RadioField는 그 위에 폼 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.Radio를 소유하는 Composition 구조. CheckboxField와 완전히 같은 패턴.클래스: Va.RadioField — va_component.js:10356short name: radioField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.Radio 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field1. 기본 사용{ tagName: 'radioField', l..

Radio (라디오 버튼)

Va.Radio — 라디오 버튼 (단일 배타 선택 항목)체크박스와 시각적으로 비슷하지만 배타 선택을 의도한 컴포넌트. 하나만 켜지고 나머지는 꺼져야 하는 상황용입니다. 단독으로도 쓸 수 있지만 여러 개를 그룹지어 사용하는 게 정석 — 그때는 Va.RadioGroup을 사용합니다.클래스: Va.Radio — va_component.js:10634short name: radio상속: Va.PureField (Checkbox와 형제)isContainer: true베이스 CSS: va-radio1. 기본 사용{ tagName: 'radio', radioLabel: '옵션 A', checked: true, onChange: 'onChange'}좌측: 라디오 버튼 아이콘 (원 안 채워짐 or ..

CheckboxGroupField (체크박스그룹필드)

Va.CheckboxGroupField — 라벨 + 다중 선택 체크박스 그룹Va.CheckboxGroup이 순수 다중 선택 그룹이라면, Va.CheckboxGroupField는 그 위에 폼 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.CheckboxGroup을 소유하는 Composition 구조.클래스: Va.CheckboxGroupField — va_component.js:11011short name: checkboxGroupField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.CheckboxGroup 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-checkbox-gro..

CheckboxGroup (체크박스그룹)

Va.CheckboxGroup — 여러 체크박스를 데이터로 관리하는 그룹여러 개의 선택지 중 여러 개를 동시 선택할 수 있는 컴포넌트. 각 체크박스를 하드코딩으로 나열하지 않고, 데이터 배열로 선언해 한 번에 렌더링합니다. 값은 선택된 key들의 배열로 다룹니다.클래스: Va.CheckboxGroup — va_component.js:10813short name: checkboxGroup상속: Va.Component (PureField 아님!)isContainer: true베이스 CSS: va-checkbox-group1. 기본 사용{ tagName: 'checkboxGroup', key: 'code', display: 'name', data: [ { code: 'A', ..

CheckboxField (체크박스필드)

Va.CheckboxField — 라벨(폼) + 체크박스 필드Va.Checkbox가 순수 체크박스라면, Va.CheckboxField는 그 위에 폼 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.Checkbox를 소유하는 Composition 구조.클래스: Va.CheckboxField — va_component.js:10202short name: checkboxField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.Checkbox 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field1. 기본 사용{ tagName: 'checkboxField', label: '..

Checkbox (체크박스)

Va.Checkbox — 체크박스가장 흔한 폼 입력 중 하나. VanillaFront의 Checkbox는 표준 을 감싸되, 값의 형태를 다양하게 선택 할 수 있고 (true/false, Y/N, 1/0), 3상 상태(mixed), 라벨 클릭 토글, 키보드(스페이스) 지원을 모두 포함합니다.클래스: Va.Checkbox — va_component.js:4483short name: checkbox상속: Va.PureField (Input·Combobox와 형제)isContainer: true베이스 CSS: va-checkbox1. 기본 사용{ tagName: 'checkbox', checkboxLabel: '동의합니다', checked: false, onChange: 'onAgreeCh..