VanillaFront

SearchPanel (조회패널)

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

TitleBar (타이틀바)

Va.TitleBar — 제목과 액션을 함께 놓는 상단 바 컨테이너제목 텍스트와 액션 버튼을 한 줄에 나란히 배치하는 상단 바 전용 컨테이너입니다. Va.Div를 상속받으며 va-title-bar 클래스가 부여되어 flex row 레이아웃 + 타이틀 바 전용 padding이 자동 적용됩니다.클래스 정보Va.TitleBar extends Va.Div extends Va.ComponenttagName: 'titleBar' (실제 렌더링은 )isContainer: true기본 사용법{ tagName: 'titleBar', tags: [ { tagName: 'title', innerHTML: '사용자 목록' }, { tagName: 'div', style: { flex: 1 ..

SubTitle (서브타이틀)

Va.SubTitle — Title 아래의 보조 제목 컴포넌트Title 아래에 오는 보조/부제목을 표시하는 전용 컨테이너입니다. Va.Div를 상속받으며 va-sub-title 클래스가 부여되어 테마별 보조 제목 스타일(작은 폰트, 옅은 색상 등)이 자동 적용됩니다. 클래스 정보Va.SubTitle extends Va.Div extends Va.ComponenttagName: 'subTitle' (실제 렌더링은 )isContainer: true기본 사용법{ tagName: 'subTitle', innerHTML: '2026년 3월 기준'}또는 코드로:let subTitle = new Va.SubTitle({ text: '(선택 사항)'});parent.append(subTitle);Tit..

Title (타이틀)

Va.Title — 페이지·섹션의 표준 타이틀 컴포넌트화면이나 섹션의 대표 제목을 표시하는 전용 타이틀 컨테이너입니다. Va.Div를 상속받으며 va-title 클래스가 부여되어 테마별 타이틀 전용 스타일(폰트 크기, 두께, 여백 등)이 자동 적용됩니다.클래스 정보Va.Title extends Va.Div extends Va.ComponenttagName: 'title' (실제 렌더링은 )isContainer: true기본 사용법{ tagName: 'title', innerHTML: '사용자 관리'}또는 코드로:let title = new Va.Title({ text: '오늘의 리포트'});parent.append(title);H1 / Header와 다른 점시맨틱 태그와의 차이점은 다음과..

ActionBar (액션바)

Va.ActionBar — 액션 버튼 모음 툴바 컨테이너저장, 취소, 삭제 등 액션 버튼들을 나란히 배치하는 툴바 전용 컨테이너입니다. Va.Div를 상속받으며 va-action-bar 클래스가 부여되어 툴바 전용 스타일(정렬, 여백, 구분선 등)이 자동 적용됩니다.클래스 정보Va.ActionBar extends Va.Div extends Va.ComponenttagName: 'actionBar' (실제 렌더링은 )isContainer: true기본 사용법{ tagName: 'actionBar', layout: 'ds-flex fd-row ai-center gap-s', tags: [ { tagName: 'button', text: '저장', appearance: 'prima..

Panel (패널)

Va.Panel — Page의 짝을 이루는 섹션 컨테이너Page 안에서 화면을 논리적으로 분할하는 표준 섹션 컨테이너입니다. 내부적으로 태그로 렌더링되며, Va.Page > Va.Panel 구조는 VanillaFront 화면의 표준 스캐폴드입니다. 접기/펼치기, 드래그로 크기 조절, 리사이즈 감지 등 실무에서 자주 필요한 기능들을 내장합니다. 클래스 정보Va.Panel extends Va.Semantic extends Va.ComponenttagName: 'panel' (실제 렌더링은 )isContainer: true기본 사용법{ tagName: 'page', tags: [{ tagName: 'panel', tags: [ { tagName: 'in..

Page (페이지)

Va.Page — View의 표준 최상위 컨테이너VanillaFront View의 루트로 사용되는 표준 페이지 컨테이너입니다. 내부적으로는 태그로 렌더링되지만 va-page 클래스로 페이지 전용 레이아웃/여백/스타일이 적용되며, Va.Panel과 짝을 이뤄 Page > Panel 구조로 화면을 구성하는 것이 VanillaFront의 표준입니다.클래스 정보Va.Page extends Va.Semantic extends Va.ComponenttagName: 'page' (실제 렌더링은 )isContainer: true기본 사용법{ tagName: 'page', tags: [{ tagName: 'panel', title: '섹션1', tags: [ /* 콘텐츠..

Span (스팬)

Va.Span — 인라인 컨테이너텍스트나 인라인 요소를 감싸는 가장 기본적인 인라인 컨테이너입니다. HTML 태그로 렌더링되며, 문장 안에서 부분 스타일링이나 인라인 그루핑에 사용됩니다.클래스 정보Va.Span extends Va.ComponenttagName: 'span'isContainer: trueisEnableRoot: trueVa.Semantic이 아닌 Va.Component를 직접 상속하며, Va.Div와 비슷한 계보의 저수준 컨테이너입니다.기본 사용법{ tagName: 'span', text: '인라인 텍스트'}HTML 태그와 함께:{ tagName: 'span', innerHTML: '이것은 굵은 텍스트'}코드로:let span = new Va.Span({ text..

Div (디비젼)

Va.Div — 범용 컨테이너VanillaFront에서 가장 기본적이고 가장 많이 쓰이는 범용 컨테이너입니다. HTML 태그로 렌더링되며, 시맨틱적 의미 없이 자식 요소들을 그룹핑하거나 레이아웃을 구성하는 데 사용됩니다.클래스 정보Va.Div extends Va.ComponenttagName: 'div'isContainer: trueisEnableRoot: trueVa.Semantic이 아닌 Va.Component를 직접 상속하며, isEnableRoot: true로 라우터 영역의 루트가 될 수 있습니다.기본 사용법{ tagName: 'div', tags: [ { tagName: 'button', text: '확인' }, { tagName: 'button', tex..

H1~H6 (해딩1~6)

H1에 대해서 설명합니다. Va.H1 — HTML5 최상위 제목 컴포넌트페이지나 섹션의 가장 큰 제목을 표시하는 헤딩 컴포넌트입니다. HTML5 태그로 렌더링되며, 문서의 정보 계층 구조에서 최상위 레벨을 나타냅니다. 클래스 정보Va.H1 extends Va.ComponenttagName: 'h1'isContainer: trueVa.Semantic이 아닌 Va.Component를 직접 상속한다는 점에 주의 (Header/Footer/Article 등 시맨틱 컨테이너와 다른 계보).기본 사용법{ tagName: 'h1', innerHTML: 'VanillaFront 시작하기'}또는 코드로:let h1 = new Va.H1({ text: '오늘의 이야기'});parent.append(h1..