VanillaFront

TabButton (탭버튼)

Va.TabButton — 탭 UI를 위한 선택형 버튼브라우저 탭이나 IDE 탭처럼 선택 상태 + 닫기 버튼 + 하단 인디케이터 바(bar) 를 갖춘 버튼입니다. 일반 Button/ToggleButton과 달리 부모 탭 컨테이너와 협력하는 라디오형 동작이 내장되어, 자신이 선택되면 형제 TabButton들을 자동으로 해제합니다.클래스: Va.TabButton — va_component.js:16599short name: tabButton상속: Va.ComponentisContainer: false기본 appearance: 'transparent' (탭 UI 관행에 맞춤)베이스 CSS: va-tab-button1. 기본 사용{ tagName: 'tab', // 부모..

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

MenuButton (메뉴버튼)

Va.MenuButton — 드롭다운 팝업 메뉴 버튼버튼을 클릭하면 아래로 팝업 메뉴가 펼쳐지고, 항목을 선택하면 접히는 컴포넌트입니다. 일반 Button과 달리 자식으로 menuItem을 담는 컨테이너이며, 팝업 위치·오토하이드·키보드 네비게이션까지 내장되어 있습니다.클래스: Va.MenuButton — va_component.js:13203short name: menuButton상속: Va.Component (Button 상속 아님, 별도 구현)isContainer: true — 자식 컴포넌트(menuItem)를 담을 수 있음베이스 CSS: va-menu-button, 팝업은 va-menu-pop1. 기본 사용자식 태그로 메뉴 정의{ tagName: 'menuButton', text: '메..

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

Button (버튼)

Va.Button — 표준 버튼 컴포넌트VanillaFront의 가장 기본이 되는 인터랙션 컴포넌트로, 텍스트·아이콘·배지·상태를 하나의 API로 다루는 다목적 버튼입니다. 엘리먼트를 감싸 표준 DOM 시맨틱을 유지하면서, 프레임워크의 컴포넌트 시스템에 편입되어 있습니다.클래스: Va.Button — va_component.js:11965short name: button (config의 tagName:'button'으로 사용)상속: Va.Component1. 기본 사용{ tagName: 'button', text: '저장', icon: 'ico_save', appearance: 'primary', onClick: 'onSave'}tagName:'button'은 프레임워크에 등..

Extention 에서 live server를 찾아서 설치함.파일을 선택하고실행하면 해당 파일 기준으로 실행됨. 5500Port로 실행됨. 변경하고 싶을 경우 아래 경로에서 변경 { "editor.fontSize": 18, "workbench.iconTheme": "vscode-icons", "files.autoSave": "onFocusChange", "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", "explorer.confirmDelete": false, "editor.tabCompletion": "on", "editor.tabS..

파일을 복사하기 위해서 우선 복사할 파일에 대한 대상을 선정해야 한다. 내 경우 assets에 있는 파일과  index.html 파일이 대상이 되었다. bulid된 파일은 ./dist 폴더로 이동해야 한다. 또한  index.html 파일 역시 dist폴더로 이동해서dist폴더만 복사해서 올리면 모든 마무리되는 형태로 갖추려 한다. 이를 위해  먼저 default로 entry에 main으로 설정된 경로를 index로 동일하게 맞춰주어야 했다.     entry:{        index: "./index.js",    }, 이제 index.js는 dist에서  만들어진 파일과 루트의  index.html이 호출하는 경로가 같아졌다. copy-webpack-plugin 을 설치 하기 위해 다음과 같이 설정..