VanillaFront

Va.Switch — ON/OFF 토글 스위치체크박스와 기능은 같지만 시각적으로 슬라이드형 스위치 UI를 제공하는 컴포넌트. iOS·Android의 설정 화면에서 흔히 보는 그 스위치입니다. 알림 켜기/끄기, 활성/비활성 같은 명확한 ON/OFF 상태에 어울려요.클래스: Va.Switch — va_component.js:9716short name: switch상속: Va.PureField (Checkbox·Radio와 형제)isContainer: false베이스 CSS: va-switch1. 기본 사용{ tagName: 'switch', checked: true, onChange: 'onNotifChange'}슬라이드형 스위치 UI (thumb이 좌↔우 이동)checked: true — ..

Va.StarSliderField — 라벨 + 별점 입력Va.StarSlider가 순수 별점 입력이라면, Va.StarSliderField는 그 위에 폼 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.StarSlider를 소유하는 Composition 구조. 리뷰 폼에 라벨 붙일 때 정석.클래스: Va.StarSliderField — va_slider.js:1039short name: starSliderField상속: Va.Field (다른 Field 형제들과 같음)파일: va_slider.js (별도 파일 — import 필요)내부 컴포넌트: Va.StarSlider 인스턴스 (fieldComponent)isContainer: true1. 시작하..

Va.StarSlider — 별점 입력 컴포넌트별 아이콘을 클릭해서 점수를 매기는 별점 입력 컴포넌트. 리뷰·평점 UI의 표준 형태. 별 개수, 색상, 최댓값 매핑까지 옵션으로 커스터마이즈됩니다.클래스: Va.StarSlider — va_slider.js:512short name: starSlider상속: Va.PureField (Slider·Input과 형제)파일: va_slider.js (별도 파일 — import 필요)isContainer: true1. 시작하기 전 — 별도 파일 importimport Va from '../../lib/va.js';import '../../lib/va_slider.js'; // ← Slider 계열 모두 이 파일에2. 기본 사용{ tagName: '..

Va.DoubleSlider — 두 개의 thumb으로 범위(min-max)를 선택하는 슬라이더Va.Slider가 단일 값을 조절한다면, Va.DoubleSlider는 두 개의 thumb으로 값 범위를 지정하는 컴포넌트. 낮은 값 thumb + 높은 값 thumb이 있고, 두 thumb 사이가 "선택된 범위"로 강조 표시됩니다. 가격 범위 필터·나이 범위·시간대 범위 같은 UI에 정확히 어울려요.클래스: Va.DoubleSlider — va_slider.js:322short name: doubleSlider상속: Va.Div (PureField 아님!)파일: va_slider.js (별도 파일 — import 필요)isContainer: true1. 시작하기 전 — 별도 파일 importimport Va..

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를 ..

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 '..

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

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

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

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