전체 글 31

InputField (입력필드)

Va.InputField — 라벨 + 입력 + 검증까지 한 세트로 묶은 폼 필드Va.Input이 순수 입력 자체라면, Va.InputField는 그 위에 라벨·필수 표시·검증 메시지·설명 텍스트·info 툴팁을 얹은 "완성된 폼 필드" 입니다. 실무에서 폼을 만들 때 훨씬 자주 쓰는 컴포넌트.클래스: Va.InputField — va_component.js:5377short name: inputField상속: Va.Field (Field 계열의 베이스)내부 컴포넌트: Va.Input 인스턴스를 자식으로 소유 (fieldComponent)isContainer: true베이스 CSS: va-field1. 기본 사용{ tagName: 'inputField', label: '이름', value:..

Input (입력)

Va.Input — 텍스트 입력 필드 (PureField 계열)가장 기본이 되는 폼 입력 컴포넌트입니다. HTML 을 감싸되, PureField 베이스가 제공하는 값 관리·마스킹·이벤트·상태 처리를 그대로 활용하고, Input 자신은 숫자 포맷팅(numberComma) 만 추가로 얹은 얇은 확장입니다.클래스: Va.Input — va_component.js:1165short name: input상속: Va.PureField (Component 직속 아님 — Field 계열의 베이스)DOM 태그: (기본 type="text")isContainer: true베이스 CSS: va-input (+ va-purefield)1. 기본 사용{ tagName: 'input', value: '홍길동', ..

ButtonGroup (버튼그룹)

Va.ButtonGroup — 상호 배타적 선택을 자동화하는 버튼 컨테이너여러 버튼을 나란히 담고, 하나가 선택되면 나머지는 자동으로 해제되는 라디오형 컨테이너입니다. Va.Div를 상속해 레이아웃 컨테이너 특성을 그대로 갖고, 그 위에 그룹 배타 선택 로직만 얹은 얇은 확장.클래스: Va.ButtonGroup — va_component.js:17484short name: buttonGroup상속: Va.Div (다른 버튼 계열과 달리 Component 직속 아님)isContainer: true베이스 CSS: va-div (Div의 것을 그대로 씀 — 자체 va-button-group 클래스 없음)1. 기본 사용{ tagName: 'buttonGroup', layout: 'ds-flex fd-..

카테고리 없음 2026.09.09

Link (링크)

Va.Link — 하이퍼링크 컴포넌트브라우저 표준 태그를 감싸는 얇은 래퍼입니다. 프레임워크의 이벤트 시스템·CSS 테마·상태 관리에 편입시킨 것 외에는 표준 HTML 링크와 거의 동일하게 동작합니다.클래스: Va.Link — va_component.js:11446short name: link상속: Va.ComponentDOM 태그: (앵커)isContainer: false베이스 CSS: va-link1. 기본 사용{ tagName: 'link', innerHTML: 'Microsoft', href: 'http://www.microsoft.co.kr', target: '_new'}렌더 결과:Microsofthref 없이 단순 라벨로 쓸 수도 있고(그럴 땐 onClick으로 프로그..

컴포넌트/버튼 2026.09.09

FileButton (파일버튼)

Va.FileButton — 파일 선택 다이얼로그를 여는 버튼클릭하면 OS의 파일 선택 다이얼로그가 열리는 버튼입니다. 을 숨겨두고 버튼을 클릭 트리거로 삼는 흔한 패턴을, 컴포넌트 하나로 캡슐화한 것.클래스: Va.FileButton — va_component.js:12256short name: fileButton상속: Va.ComponentisContainer: false기본 아이콘: ico_attach (첨부 아이콘)베이스 CSS: va-button (일반 Button과 스타일 계보 공유)1. 기본 사용{ tagName: 'fileButton', text: '파일 첨부', onChange: 'onFileSelected' // 파일 선택 완료 시}onFileSelected(comp..

컴포넌트/버튼 2026.09.09