VanillaFront

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