ActionBar (액션바)

Va.ActionBar — 액션 버튼 모음 툴바 컨테이너

저장, 취소, 삭제 등 액션 버튼들을 나란히 배치하는 툴바 전용 컨테이너입니다. Va.Div를 상속받으며 va-action-bar 클래스가 부여되어 툴바 전용 스타일(정렬, 여백, 구분선 등)이 자동 적용됩니다.

클래스 정보

Va.ActionBar extends Va.Div extends Va.Component
tagName: 'actionBar' (실제 렌더링은 <div>)
isContainer: true

기본 사용법

{
    tagName: 'actionBar',
    layout: 'ds-flex fd-row ai-center gap-s',
    tags: [
        { tagName: 'button', text: '저장', appearance: 'primary' },
        { tagName: 'button', text: '취소' }
    ]
}

왜 별도 컴포넌트인가

동일한 결과를 Va.Div로도 만들 수 있지만, Va.ActionBar를 쓰면:

• 의미 전달 — 코드만 봐도 "이건 액션 버튼 바구나"라는 것이 명확
• 일관된 스타일 — 테마별로 툴바 전용 여백·정렬·구분선이 자동 적용
• 에디터·카탈로그 지원 — WYSIWYG 에디터, 컴포넌트 카탈로그에서 별도 UI 요소로 인식
• 미래 확장 — 오버플로우 처리, 반응형 접힘 등의 기능이 추가되어도 자동 적용

즉 "여러 버튼을 모아둔 표준 자리"를 명시하는 시맨틱 컨테이너입니다.

속성

Va.Div로부터 상속받는 모든 속성 + 명시적 노출:

속성타입설명

text	String	순수 텍스트 (자동 이스케이프)
innerHTML	String	HTML 문자열
layout	String	flex/grid 레이아웃 클래스 (ds-flex fd-row gap-s 등)
style, class, hidden, attributes	—	공통 속성
gridHeader, gridBody	Boolean	Div로부터 상속

이벤트

Va.Div로부터 상속:

• click — 클릭 시
• contextmenu — 우클릭 시

메서드

• setText(text) — 텍스트 변경 후 업데이트
• setInnerHTML(html) — HTML 변경 후 업데이트
• Va.Div / Va.Component 공통 메서드

내부 구조

<div class="va-action-bar" tag-name="actionBar">
    <!-- containerElement에 버튼 등 자식 -->
</div>

사용 시점 — 언제 쓰나

• 폼 하단 액션 바 — 저장/취소 버튼 세트
• 그리드 상단 툴바 — 조회/추가/편집/삭제 버튼
• 다이얼로그 푸터 — 확인/취소 액션
• 페이지 상단 툴바 — 새로고침/내보내기/설정 등

사용하지 말아야 할 때

• 의미 없는 단순 그루핑 → Va.Div
• 내비게이션 링크 목록 → Va.Nav
• 폼 필드 정렬 → Va.FieldRow 또는 Va.Div + layout
• 탭 인터페이스 → Va.Tab

자주 쓰는 조합 예시

폼 하단 액션 바

{
    tagName: 'actionBar',
    layout: 'ds-flex fd-row ai-center gap-s',
    tags: [
        { tagName: 'button', text: '저장', appearance: 'primary', onClick: 'onClickSave' },
        { tagName: 'button', text: '취소', onClick: 'onClickCancel' }
    ]
}

우측 정렬 액션 바 (spacer 활용)

{
    tagName: 'actionBar',
    layout: 'ds-flex fd-row ai-center gap-s',
    tags: [
        { tagName: 'div', style: { flex: 1 } },
        { tagName: 'button', text: '취소' },
        { tagName: 'button', text: '저장', appearance: 'primary' }
    ]
}

아이콘 버튼 툴바

{
    tagName: 'actionBar',
    layout: 'ds-flex fd-row ai-center gap-s',
    tags: [
        { tagName: 'button', text: 'Add', appearance: 'primary', icon: 'ico_add' },
        { tagName: 'button', text: 'Edit', icon: 'ico_edit_fill' },
        { tagName: 'button', text: 'Delete', appearance: 'danger', icon: 'ico_delete_fill' }
    ]
}

Panel 안에서 그리드 툴바

{
    tagName: 'panel',
    tags: [{
        tagName: 'actionBar',
        layout: 'ds-flex fd-row ai-center gap-s',
        tags: [
            { tagName: 'button', text: '조회', appearance: 'primary', onClick: 'onClickSearch' },
            { tagName: 'div', style: { flex: 1 } },
            { tagName: 'button', text: '엑셀 다운로드', icon: 'ico_download' }
        ]
    },{
        ref: 'refGrid',
        tagName: 'grid',
        /* ... */
    }]
}

혼합 컴포넌트 툴바 (필드 + 버튼)

{
    tagName: 'actionBar',
    layout: 'ds-flex fd-row ai-center gap-s',
    tags: [
        { tagName: 'inputField', label: '검색어', ref: 'refKeyword' },
        { tagName: 'button', text: '검색', appearance: 'primary', onClick: 'onClickSearch' },
        { tagName: 'div', style: { flex: 1 } },
        { tagName: 'button', text: '초기화', onClick: 'onClickReset' }
    ]
}

실전 예시 — CRUD 화면 툴바

config(){
    return {
        tagName: 'page',
        tags: [{
            tagName: 'panel',
            tags: [{
                tagName: 'actionBar',
                layout: 'ds-flex fd-row ai-center gap-s',
                tags: [
                    { tagName: 'button', text: '신규', icon: 'ico_add', onClick: 'onClickNew' },
                    { tagName: 'button', text: '저장', appearance: 'primary', icon: 'ico_save', onClick: 'onClickSave' },
                    { tagName: 'button', text: '삭제', appearance: 'danger', icon: 'ico_delete_fill', onClick: 'onClickDelete' },
                    { tagName: 'div', style: { flex: 1 } },
                    { tagName: 'button', text: '새로고침', icon: 'ico_refresh', onClick: 'onClickRefresh' }
                ]
            },{
                ref: 'refGrid',
                tagName: 'grid',
                columns: [ /* ... */ ]
            }]
        }]
    };
}

주의사항

• Va.Div 상속 — Div가 제공하는 모든 속성/이벤트/메서드가 그대로 사용 가능
• layout 필수 아님 — 기본 CSS로도 정렬은 되지만, 명시적으로 layout: 'ds-flex fd-row gap-s'를 주면 의도가 분명해짐
• spacer 패턴 — 좌우 정렬 분리는 중간에 { tagName: 'div', style: { flex: 1 } }
• 아이콘은 VanillaFront 자체 아이콘 사용 — ico_add, ico_edit_fill 등. classList.add()가 공백 있는 문자열을 지원하지 않아 'fa-solid fa-plus' 같은 Font Awesome 형식은 예외 발생
• Va.Toolbar와 비교 — 프로젝트에 별도 Toolbar 컴포넌트가 있다면 역할이 겹칠 수 있으니 하나로 통일하는 것을 권장 (팀 컨벤션 확인)

대안 비교

상황추천

액션 버튼 모음	Va.ActionBar
순수 그루핑	Va.Div
폼 필드 가로 정렬	Va.FieldRow
내비게이션 링크	Va.Nav
페이지 상단 헤더 (로고+메뉴+액션)	Va.Header + ActionBar 조합
탭	Va.Tab

참고

• API 문서 페이지: https://vanillafront.com/docs.html?theme=light#main#apiactionbar
• 연관: Va.Div(부모), Va.FieldRow(형제 — 필드 정렬용)