VanillaFront

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: '추..

Va.Badge — 알림·상태 표시 뱃지 컴포넌트숫자, 짧은 텍스트, 아이콘, 또는 상태 점을 표시하는 뱃지 컴포넌트입니다. 알림 카운트, 상태 표시, 카테고리 라벨 등에 사용되며, Va.Avatar·Va.Button 등 다른 컴포넌트에 오버레이로 붙기도 합니다. 클래스 정보Va.Badge extends Va.ComponenttagName: 'badge' (실제 렌더링은 )isContainer: false기본 사용법숫자 뱃지 (알림 카운트):{ tagName: 'badge', text: '3', color: 'danger'}상태 점 (텍스트 없음):{ tagName: 'badge', color: 'success'}아이콘 뱃지:{ tagName: 'badge', ico..

Va.Persona — 아바타 + 이름·역할 조합 컴포넌트Va.Avatar를 감싸 이름(title)과 부가 설명(detail)을 함께 표시하는 조합 컴포넌트입니다. "사용자 사진 + 이름 + 직책" 처럼 사람 정보를 한 단위로 표현하는 데 최적화되어 있으며, 텍스트 위치를 자유롭게 배치할 수 있습니다. 클래스 정보Va.Persona extends Va.ComponenttagName: 'persona' (실제 렌더링은 )isContainer: true파일: va_avatar.js기본 사용법{ tagName: 'persona', title: '홍길동', detail: '개발팀장', textPosition: 'right', avatar: { image: user.phot..

Va.AvatarGroup — 아바타 그룹 컨테이너여러 아바타를 나란히 또는 겹쳐 표시하고, 지정 개수 초과 시 자동으로 +N 팝업으로 접어주는 컨테이너입니다. 협업 UI에서 프로젝트 참여자, 채팅 참가자, 팀 멤버 목록 등을 콤팩트하게 표시할 때 사용됩니다. 클래스 정보Va.AvatarGroup extends Va.ComponenttagName: 'avatarGroup' (실제 렌더링은 )isContainer: true파일: va_avatar.js (Va.Avatar와 같은 모듈)기본 사용법{ tagName: 'avatarGroup', stackSize: 4, layout: 'stack', tags: [ { tagName: 'avatar', image: user1.ph..

Va.Avatar — 사용자 표현 아바타 컴포넌트사용자를 아이콘, 이니셜, 또는 이미지로 표현하는 아바타 컴포넌트입니다. 원형/사각형 모양, 활성 상태 표시, 뱃지 오버레이 기능을 내장하며 SNS/협업 UI에 최적화되어 있습니다. 클래스 정보Va.Avatar extends Va.ComponenttagName: 'avatar' (실제 렌더링은 )isContainer: false파일: va_avatar.js (별도 모듈)기본 사용법이미지 아바타 (프로필 사진):{ tagName: 'avatar', image: './assets/img/user.jpg', size: 'medium'}이니셜 아바타 (사진 없을 때):{ tagName: 'avatar', initial: 'HG', ..

Va.I — 아이콘 표시 컴포넌트VanillaFront 아이콘을 표시하는 전용 컴포넌트입니다. HTML 태그로 렌더링되며, ico_xxx 클래스로 정의된 mask-image 방식 아이콘을 편리하게 배치합니다. Va.Component를 직접 상속합니다.클래스 정보Va.I extends Va.ComponenttagName: 'i'isContainer: true기본 사용법{ tagName: 'i', icon: 'ico_add'}또는 코드로:let icon = new Va.I({ icon: 'ico_edit_fill' });parent.append(icon);VanillaFront 아이콘 시스템VanillaFront는 CSS mask-image 방식의 SVG 아이콘 시스템을 사용합니다:각 아이콘은 ..

Va.Image — 이미지 표시 컴포넌트 태그를 감싸 shape, bordered, shadow, 로드 실패 대체 이미지 등의 실전 옵션을 제공하는 이미지 컴포넌트입니다. Va.Component를 직접 상속하며 va-image 클래스가 부여됩니다. 클래스 정보Va.Image extends Va.ComponenttagName: 'image' (실제 렌더링은 )isContainer: false기본 사용법{ tagName: 'image', src: './assets/img/logo.png', style: { width: '200px', height: 'auto' }}또는 코드로:let image = new Va.Image({ src: './assets/img/photo.jpg', b..

Va.StickyDiv — 스크롤 시 고정되는 Sticky 컨테이너스크롤해도 화면 특정 위치에 고정되는(sticky) 컨테이너입니다. CSS position: sticky를 자동 적용하며, position 속성으로 top/bottom/left/right 중 고정 위치를 지정할 수 있습니다.클래스 정보Va.StickyDiv extends Va.ComponenttagName: 'stickyDiv' (실제 렌더링은 )isContainer: trueVa.Div가 아니라 Va.Component를 직접 상속하지만, CSS 클래스는 va-div sticky가 부여되어 Div 계열 스타일을 재사용합니다.기본 사용법{ tagName: 'stickyDiv', position: 'top', style: { ..

Va.GridDiv — CSS Grid 기반 격자 레이아웃 컨테이너CSS Grid를 이용해 셀 단위 격자 레이아웃을 만드는 컨테이너입니다. Va.Component를 직접 상속받으며 display: grid가 자동 적용되어, 실제 데이터 그리드(Va.Grid)와는 다른 목적의 정적 격자 레이아웃(카드 나열, 폼 격자 배치, 스프레드시트 스타일 표 등)에 사용됩니다.클래스 정보Va.GridDiv extends Va.ComponenttagName: 'gridDiv' (실제 렌더링은 )isContainer: trueisEnableRoot: true파일: va_griddiv.js (별도 모듈)짝을 이루는 3형제va_griddiv.js 하나에 세 컴포넌트가 함께 정의되어 있으며, 함께 사용하는 것이 표준 패턴입니다..

Va.SearchPanel — 조회 조건 전용 패널 컨테이너목록/그리드 화면 상단의 "조회 조건 입력 영역"을 위한 전용 패널입니다. Va.Semantic을 상속받아 태그로 렌더링되며, va-search-panel 클래스가 부여되어 테두리·상단 강조선·hover 그림자 등 검색 폼 전용 시각 스타일이 자동 적용됩니다.클래스 정보Va.SearchPanel extends Va.Semantic extends Va.ComponenttagName: 'searchPanel' (실제 렌더링은 )isContainer: true기본 사용법{ tagName: 'searchPanel', layout: 'ds-flex fd-row ai-center gap-s', tags: [ { tagName:..