VanillaFront

Search (검색)

Va.Search — 검색 입력 필드Va.Input과 거의 동일한 텍스트 입력이지만, HTML 표준 를 사용해 브라우저가 자동으로 검색 아이콘 · 지우기(×) 버튼 을 그려주는 컴포넌트입니다. 코드 자체는 초미니 클래스 — 사실상 "type을 'search'로 고정한 Input"입니다.클래스: Va.Search — va_component.js:1216short name: search상속: Va.PureField (Input과 형제)DOM 태그: (하드코딩)isContainer: true베이스 CSS: va-input (Input과 동일 클래스 공유)1. 기본 사용{ tagName: 'search', placeholder: '검색어를 입력하세요', onChange: 'onSearch'}..

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

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으로 프로그..

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

ToggleButton (토글버튼)

Va.ToggleButton — 눌린 상태를 유지하는 토글 버튼일반 Va.Button이 매번 눌렀다 놓아지는 순간 액션이라면, Va.ToggleButton은 눌린/안 눌린 상태(pressed)를 유지하는 이중 상태 버튼입니다. 볼드/이탤릭 같은 툴바 토글, 필터 on/off, 사이드바 표시 토글 같은 곳에 씁니다.클래스: Va.ToggleButton — va_component.js:12733short name: toggleButton상속: Va.Component (Button 상속 아님, 별도 구현)베이스 CSS: va-button (Button과 스타일 계보 공유)1. 기본 사용{ tagName: 'toggleButton', text: 'Bold', icon: 'ico_bold', ..

SplitButton (분할버튼)

Va.SplitButton — 액션 + 드롭다운이 나뉜 분할 버튼버튼 하나가 두 영역으로 갈라져 있는 컴포넌트입니다. 왼쪽 영역은 즉시 실행되는 주 액션, 오른쪽 작은 화살표 영역은 드롭다운 메뉴 트리거. "저장" 버튼 옆에 "다른 이름으로 저장 / 사본으로 저장…" 같은 대안 액션들을 팝업으로 제공할 때 씁니다.클래스: Va.SplitButton — va_component.js:14959short name: splitButton상속: Va.ComponentisContainer: true — 자식으로 menuItem 담음베이스 CSS: va-split-button1. 기본 사용{ tagName: 'splitButton', text: '저장', icon: 'ico_save', onCl..

ResponsiveMenuButton (응답형메뉴버튼)

Va.ResponsiveMenuButton — 화면 크기에 따라 팝업/인라인이 자동 전환되는 메뉴 버튼데스크톱에서는 MenuButton처럼 플로팅 팝업으로 열리고, 모바일에서는 ExpandButton처럼 인라인으로 펼쳐지는 하이브리드 컴포넌트입니다. 화면 폭 하나에 대응하는 UI를 두 벌 만들 필요 없이, 이 컴포넌트 하나로 두 형태를 자동 전환합니다.클래스: Va.ResponsiveMenuButton — va_component.js:14681short name: responsiveMenuButton상속: Va.Component — 내부에 Va.MenuButton 인스턴스를 감싸는 래퍼(wrapper) 구조isContainer: true베이스 CSS: va-responsive-menu-button작성 이..

ExpandButton (확장버튼)

Va.ExpandButton — 인라인 확장/축소 버튼버튼을 누르면 바로 아래에 컨텐츠 영역이 슬라이드로 펼쳐지는 컴포넌트입니다. MenuButton과 달리 팝업(floating)이 아니라 인라인으로 자식을 드러내므로, 뒤에 오는 콘텐츠를 밀어냅니다. 아코디언 항목, 접이식 카드, 세부 옵션 토글 같은 UI에 쓰입니다.클래스: Va.ExpandButton — va_component.js:13780short name: expandButton상속: Va.ComponentisContainer: true — 자식으로 아무 컴포넌트나 담을 수 있음 (button, menuItem, 심지어 중첩 expandButton도 가능)베이스 CSS: va-expand-button, 확장 영역은 va-menu-expand ..

CompoundButton (복합버튼)

Va.CompoundButton — 두 줄짜리 복합 버튼일반 Va.Button이 한 줄 라벨을 가진 버튼이라면, Va.CompoundButton은 주 텍스트(primary) + 부가 설명(secondary)을 한 버튼에 담는 두 줄 구조입니다. "저장 / 변경사항 5건", "결제 / VISA •••1234"처럼 라벨과 컨텍스트를 함께 보여줘야 하는 상황에 씁니다.클래스: Va.CompoundButton — va_component.js:12975short name: compoundButton상속: Va.Component (Button과 형제 관계, Va.Button을 상속하진 않음)베이스 CSS: va-button (일반 버튼과 스타일 계보 공유) 1. 기본 사용{ tagName: 'compoundB..