VanillaFront

Va.Section — HTML 시맨틱 컨테이너HTML5의 태그를 감싸는 시맨틱 컨테이너. 주제별로 구분된 문서 섹션을 나타내는 요소입니다. Va.Article과 자주 헷갈리지만, "독립 콘텐츠"가 아니라 "주제별 그룹핑" 이라는 게 결정적 차이. 데모·문서 페이지에서 하위 섹션을 나눌 때 관행처럼 사용됩니다.클래스: Va.Section — va_component.js:21376short name: section상속: Va.Semantic (Article·Main과 같은 부모)DOM 태그: isContainer: true베이스 CSS: va-section1. 기본 사용{ tagName: 'section', layout: 'ds-flex fd-column gap-m', tags: [ ..

Va.Article — HTML 시맨틱 컨테이너HTML5의 태그를 감싸는 시맨틱 컨테이너. 독립적으로 배포·재사용 가능한 콘텐츠를 나타내는 랜드마크 요소입니다. 블로그 글·뉴스 기사·상품 카드처럼 그 자체로 완결된 콘텐츠 단위에 어울립니다. VanillaFront에서 가장 자주 쓰는 semantic 태그 중 하나 — 데모 코드에서도 최상위 컨테이너로 자주 등장.클래스: Va.Article — va_component.js:21824short name: article상속: Va.Semantic (Main·Section과 같은 부모)DOM 태그: isContainer: true베이스 CSS: va-article1. 기본 사용{ tagName: 'article', layout: 'ds-flex f..

Va.Main — HTML 시맨틱 컨테이너HTML5의 태그를 감싸는 시맨틱 컨테이너 컴포넌트. 한 페이지의 주요 콘텐츠를 나타내는 접근성·SEO용 랜드마크 요소입니다. Va.Section, Va.Article, Va.Header, Va.Footer 등과 같은 Semantic 계열의 형제.클래스: Va.Main — va_component.js:21939short name: main상속: Va.Semantic (Section·Article과 같은 부모)DOM 태그: isContainer: true베이스 CSS: va-main1. 기본 사용{ tagName: 'main', layout: 'ds-flex fd-column gap-m', tags: [ { tagName: 'h1',..

Va.Validation — 상태 아이콘 + 메시지 표시폼 필드 아래 표시되는 검증/상태 메시지 컴포넌트. error/warning/success 상태를 상태별 색상·아이콘과 함께 표시합니다. 대개 개발자가 직접 배치하기보다 Field 계열이 내부에서 자동으로 사용하는 컴포넌트.클래스: Va.Validation — va_component.js:167short name: validation상속: Va.ComponentisContainer: false베이스 CSS: va-validation1. 기본 사용{ tagName: 'validation', state: 'error', text: '필수 항목입니다'}상태에 따라 CSS 클래스가 붙어 색·아이콘이 결정됨error — 빨강, warning ..

Va.LabelField — 라벨만 있는 Field (내부 필드 없음)입력 컴포넌트 없이 폼 라벨 영역만 가진 Field입니다. Field 계열 중 가장 단순한 클래스로, Va.Field 베이스가 만들어주는 라벨 영역 + 검증 영역만 있고 내부 fieldComponent(Input/Combobox 등)는 없습니다. 사용자가 자식으로 자유롭게 컴포넌트를 담을 수 있는 "빈 필드 컨테이너".클래스: Va.LabelField — va_component.js:5351short name: labelField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: 없음 (다른 Field는 모두 있음)isContainer: true베이스 CSS: va-field1. 기본 사용{ tagName: '..

Va.Label — 텍스트 라벨 (info 버튼 포함)폼 필드의 라벨이나 화면의 짧은 텍스트 라벨을 표현하는 컴포넌트. 단순한 태그를 감싸지만 info 툴팁 버튼 통합, 필수 표시(별표), 라벨 위치·정렬 등 폼 라벨에 필요한 기능이 함께 들어 있습니다.클래스: Va.Label — va_component.js:22short name: label상속: Va.ComponentDOM 태그: isContainer: false베이스 CSS: va-label1. 기본 사용{ tagName: 'label', label: '이름', required: true, infoButton: { tooltip: '이름을 정확히 입력하세요' }}텍스트: 이름우측: 필수 별표(빨간 *)옆에:..

Va.DisplayField — 라벨 + 읽기 전용 값 표시Va.Display가 순수 표시 필드라면, Va.DisplayField는 그 위에 폼 라벨·검증 메시지 영역을 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.Display를 소유하는 Composition 구조. 폼 안 조회 화면의 정석.클래스: Va.DisplayField — va_component.js:9612short name: displayField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.Display 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field1. 기본 사용{ tagName: 'displayField', labe..

Va.Display — 읽기 전용 값 표시입력 대신 값을 표시만 하는 필드. 다른 폼 필드와 시각적 규격을 맞춰 정렬된 값 표시가 필요할 때 사용합니다. 보다 유연해서 HTML 콘텐츠까지 담을 수 있습니다.클래스: Va.Display — va_component.js:9557short name: display상속: Va.PureField (Input과 형제)DOM 태그: (Input과 달리 이 아님)isContainer: true베이스 CSS: va-display1. 기본 사용{ tagName: 'display', text: '홍길동', style: { width: '200px' }}입력 불가한 값 표시다른 폼 필드와 같은 크기·정렬로 배치 가능편집 없이 데이터 조회 화면에 어울림2. D..

Va.FileDropUploadField — 라벨 + 드래그앤드롭 파일 업로드Va.FileDropUpload가 순수 드롭 영역이라면, Va.FileDropUploadField는 그 위에 폼 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.FileDropUpload를 소유하는 Composition 구조. 폼 안에서 드래그앤드롭 업로드가 필요할 때 정석.클래스: Va.FileDropUploadField — va_component.js:12653short name: fileDropUploadField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.FileDropUpload 인스턴스 (fieldComponent)isContain..

Va.FileDropUpload — 드래그앤드롭 파일 업로드 영역드래그앤드롭이 주된 UI인 파일 업로드 컴포넌트. 사용자가 파일을 창 안에 끌어다 놓으면 자동으로 읽어 이벤트를 dispatch합니다. 파일 내용을 텍스트로 읽을지 DataURL(base64)로 읽을지 옵션으로 선택 가능.클래스: Va.FileDropUpload — va_component.js:12504short name: fileDropUpload상속: Va.Component (PureField 아님!)isContainer: true베이스 CSS: va-file-upload-div1. 기본 사용{ tagName: 'fileDropUpload', text: '파일을 여기 놓으세요', fileType: 'binary', ..