VanillaFront

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