VanillaFront

File (파일)

Va.File — 파일 업로드 입력 (선택 표시 + 리셋 버튼 통합)파일 선택 다이얼로그를 여는 표준 파일 입력 컴포넌트. 선택된 파일명 표시·File 버튼·Reset 버튼이 하나의 필드로 통합되어 있어, 일반 보다 사용자 UX가 정리되어 있습니다.클래스: Va.File — va_component.js:9844short name: file상속: Va.PureField (Input·Textarea와 형제)isContainer: true베이스 CSS: va-file1. 기본 사용{ tagName: 'file', onChange: 'onFileSelected'}렌더 결과:좌측 표시 영역: Choose file (기본) → 선택 후 파일명File 버튼: 클릭 시 파일 선택 다이얼로그Reset 버튼: ..

TextareaField (텍스트영역필드)

TextareaField 정리해 드릴게요.Va.TextareaField — 라벨 + 여러 줄 텍스트 입력Va.Textarea가 순수 여러 줄 입력이라면, Va.TextareaField는 그 위에 폼 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.Textarea를 소유하는 Composition 구조. 게시글·리뷰·메모 폼에 정석.클래스: Va.TextareaField — va_component.js:9418short name: textareaField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.Textarea 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field1. 기본 ..

Textarea (텍스트영역)

Va.Textarea — 여러 줄 텍스트 입력HTML 표준을 감싸되, 글자 수 표시·내용에 따른 높이 자동 조절·리사이즈 방향 제어 같은 실무에 자주 필요한 기능이 추가된 컴포넌트. 게시글·메모·리뷰 본문 같은 긴 텍스트 입력에 씁니다.클래스: Va.Textarea — va_component.js:4722short name: textarea상속: Va.PureField (Input과 형제)DOM 태그: isContainer: true베이스 CSS: va-textarea1. 기본 사용{ tagName: 'textarea', value: '초기 내용', placeholder: '내용을 입력하세요', onChange: 'onContentChange'}여러 줄 텍스트 입력창Enter로 줄..

SwitchField (스위치필드)

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

Switch (스위치)

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

StarSliderField (스타슬라이더필드)

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. 시작하..

StarSlider (스타슬라이더)

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

DoubleSlider (더블슬라이더)

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