VanillaFront

ResponsiveNav (반응형 내비게이션)

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

NavigationMenuBar (햄버거 메뉴 바)

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

NavigationBar (내비게이션 바)

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

PivotGrid (피벗 그리드)

Va.PivotGrid — 크로스탭 집계 그리드 컴포넌트평평한 원본 데이터를 축(row/column/value)으로 교차 집계하여 표 형태로 표시하는 피벗 그리드 컴포넌트입니다. Excel 피벗 테이블과 유사한 구조로, 행 축·열 축·값 축을 컬럼에 지정하기만 하면 프레임워크가 자동으로 컬럼을 확장하고 집계값을 계산합니다. Va.Grid를 상속받아 가상 스크롤, 정렬, 고정 컬럼, 다단 헤더, 다중 선택 등 그리드의 모든 기능을 그대로 계승합니다.클래스 정보Va.PivotGrid extends Va.GridtagName: 'pivotGrid'isContainer: false파일: va_pivotgrid.js기본 사용법{ ref: 'refPivotGrid', tagName: 'pivotGrid'..

TreeGrid (트리 그리드)

Va.TreeGrid — 계층 데이터 그리드 컴포넌트부모-자식 관계를 가진 계층 데이터를 표 형태로 표시·편집·조회하는 트리 그리드 컴포넌트입니다. Va.Grid를 상속받아 가상 스크롤, 정렬, 필터링, 고정 컬럼, 셀 인라인 편집(FlashTag), 셀 내 상시 컴포넌트(Tag), 다단 헤더, 요약 행, 다중 선택 등 그리드의 모든 기능을 계승하면서, 노드 확장/축소, 트리 렌더링, 트리를 지키는 정렬·필터, 폴더 모드까지 트리 전용 기능을 제공합니다.클래스 정보Va.TreeGrid extends Va.GridtagName: 'treeGrid'isContainer: false파일: va_treegrid.js기본 사용법{ ref: 'refTreeGrid', tagName: 'treeGrid',..