VanillaFront

Va.ResponsiveNav — 자동 반응형 내비게이션 바 컴포넌트뷰포트 크기에 따라 자동으로 레이아웃을 전환하는 반응형 내비게이션 컴포넌트입니다. 데스크톱/태블릿에서는 헤더에 메뉴가 가로로 나열되고, 모바일에서는 자동으로 햄버거 버튼 방식으로 접힙니다. 화면 크기에 맞춰 자식 컴포넌트가 menuDiv ↔ menuPop 사이를 자동 이동하므로, 반응형 처리를 별도 코드로 짤 필요가 없습니다. overlay 모드, 상단/하단 위치, 외부 클릭 자동 닫힘까지 지원합니다.클래스 정보Va.ResponsiveNav extends Va.ComponenttagName: 'responsiveNav'isContainer: true기본 HTML: 요소 (aria-labelledby 자동 부여)파일: va_compone..

Va.NavigationMenuBar — 확장형 메뉴 내비게이션 바햄버거 메뉴 버튼과 확장 가능한 메뉴 영역을 결합한 상단 내비게이션 컴포넌트입니다. 헤더 우측에 자동으로 메뉴 버튼(햄버거 아이콘)이 배치되고, 클릭하면 아래로 펼쳐지는 메뉴 팝 영역에 메뉴 항목들이 표시됩니다. 모바일 친화적인 접기/펼치기 UX가 필요한 애플리케이션이나, 메뉴 항목이 많아 상단 바에 다 배치하기 어려운 경우에 적합합니다.클래스 정보Va.NavigationMenuBar extends Va.ComponenttagName: 'navigationMenuBar'isContainer: true기본 HTML: 요소파일: va_component.js기본 사용법{ tagName: 'navigationMenuBar', titl..

Va.NavigationBar — 상단 내비게이션 바 컴포넌트애플리케이션의 상단 헤더 영역을 담당하는 내비게이션 바 컴포넌트입니다. 좌측에 타이틀(또는 로고), 가운데에 메뉴 영역, 우측에 유틸 영역을 가진 3분할 구조로, 웹 애플리케이션에서 가장 표준적인 상단 바 레이아웃을 제공합니다. 내부에 menuButton, button 등을 자유롭게 배치할 수 있으며, menuAlign 속성으로 메뉴의 정렬 위치를 좌·중·우로 지정할 수 있습니다. 클래스 정보Va.NavigationBar extends Va.ComponenttagName: 'navigationBar'isContainer: true기본 HTML: 요소 (접근성 role 자동 부여)파일: va_component.js기본 사용법{ tagNam..

Va.Toolbar — 오버플로우 스크롤 지원 툴바 컨테이너여러 버튼/컴포넌트를 나란히 배치하되, 폭/높이가 부족하면 자동으로 좌우(또는 상하) 스크롤 버튼이 나타나는 툴바입니다. Va.Div를 상속하며 반응형 툴바 UX를 내장합니다. 클래스 정보Va.Toolbar extends Va.Div extends Va.ComponenttagName: 'toolbar' (실제 렌더링은 )isContainer: true기본 사용법{ tagName: 'toolbar', direction: 'horizontal', tags: [ { tagName: 'button', text: '조회', icon: 'ico_search' }, { tagName: 'button', text: '추..