사용자 지정 콘텐츠가 포함된 AppBar 추가(HTML)

아티클
03/04/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

JavaScript로 작성한 Windows 스토어 앱에 사용자 지정 콘텐츠가 포함된 AppBar를 추가할 수 있습니다.AppBar 컨트롤 및 이 컨트롤에 포함된 AppBarCommand 컨트롤을 다양한 방법으로 사용자 지정할 수 있습니다. 사용자 지정 HTML 콘텐츠를 추가하고, 플라이아웃을 만들고, 토글 명령을 삽입할 수 있습니다.

참고 앱의 영구적 탐색 모음을 만들려는 경우 NavBar 컨트롤을 대신 사용합니다. 탐색 모음을 만드는 방법에 대한 자세한 내용은 빠른 시작: 탐색 모음 및 뒤로 단추 추가를 참조하세요.

사전 요구 사항

지침

비어 있는 앱 템플릿을 사용하여 새 프로젝트 만들기

Microsoft Visual Studio를 시작합니다.
시작 페이지 탭에서 새 프로젝트를 클릭합니다. 새 프로젝트 대화 상자가 열립니다.
설치됨 창에서 템플릿 및 JavaScript를 확장하고 Windows 스토어 앱 템플릿 종류를 클릭합니다. JavaScript에 사용할 수 있는 프로젝트 템플릿이 대화 상자의 가운데 창에 표시됩니다.
가운데 창에서 빈 앱 프로젝트 템플릿을 선택합니다.
이름 입력란에 사용자 지정 AppBar 데모를 입력합니다.
확인을 클릭하여 프로젝트를 만듭니다.

2. 바 컨트롤 추가 및 명령 사용자 지정

사용자 지정할 수 있는 AppBar 명령을 통해 AppBar를 사용자 지정할 수 있습니다. type 속성을 사용하여 AppBarCommand 컨트롤의 유형을 변경할 수 있습니다. 일부 AppBar 명령 유형은 특정 HTML 요소에서만 호스트할 수 있습니다.

AppBarCommand.type 속성은 다음 5가지 값 중 하나를 사용합니다.

button - 유형의 기본값입니다. 표준 단추를 정의하며 <button> 요소에만 적용할 수 있습니다.
flyout - 인접한 HTML 조각(플라이아웃)을 표시하는 단추를 만듭니다. 플라이아웃 AppBarCommand를 만들려면 유형을 "flyout"으로 지정하고 해당 flyout 속성을 설정합니다. flyout 속성은 정의된 Flyout 컨트롤을 참조해야 합니다. <button> 요소만 플라이아웃 AppBarCommand를 호스트할 수 있습니다.
toggle - 선택하거나 선택 취소할 수 있는 단추를 만듭니다. 단추를 선택하면 AppBarCommand의 아이콘 색이 반대가 됩니다(예를 들어 검은색은 흰색이 되고 흰색은 검은색이 됨). <button> 요소만 토글 AppBarCommand를 호스트할 수 있습니다.
separator - AppBar에 가로 줄을 만들어 다른 AppBarCommand 컨트롤 간에 시각적 구분을 만듭니다. <hr/> 요소만 구분줄 AppBarCommand를 호스트할 수 있습니다.
content - 내부에 다른 HTML 태그를 호스트할 수 있는 AppBarCommand를 만듭니다. 호스트된 태그에는 텍스트, <input> 태그 및 WinJS(JavaScript용 Windows 라이브러리) 컨트롤 하위 집합이 포함될 수 있습니다. <div> 요소만 콘텐츠 AppBarCommand를 호스트할 수 있습니다.

HTML에서 선언적으로 또는 JavaScript를 사용하여 런타임에 AppBar 및 AppBarCommand 컨트롤을 만들 수 있습니다. 이 예제에서는 default.html의 HTML 태그에서 선언적으로 AppBar를 만듭니다. 예제에는 7개의 AppBarCommand 컨트롤이 있습니다.

Hh780658.wedge(ko-kr,WIN.10).gif AppBar에 사용자 지정 콘텐츠를 추가하려면

솔루션 탐색기에서 솔루션 루트의 default.html 파일을 엽니다.

<body> 태그 내의 태그를 다음 태그로 바꿉니다.

<div data-win-control="WinJS.UI.AppBar"
    data-win-options="{
        placement: 'bottom'
    }">
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'default'
            icon: 'placeholder',
            label: 'Button',
            type: 'button'
    }">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'flyout', 
            icon: 'volume', 
            label: 'Volume', 
            type: 'flyout',
            flyout: select('#volumeFlyout')}">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'toggle', 
            icon: 'filter', 
            label: 'Filter', 
            type: 'toggle'}">
    </button>
    <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'separator' }"/>
    <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
        <p>You can include a wide variety of HTML inside of a 'content' AppBarCommand, <br/>
        including HTML and some WinJS controls.</p>
    </div>
    <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
        <div id="itemContainer"
             data-win-control="WinJS.UI.ItemContainer">
            <h3>Item Container</h3>
        </div>
    </div>
</div>
<div id="volumeFlyout"
     data-win-control="WinJS.UI.Flyout">
    <h3>Volume</h3> <input type="range" />
</div>

요약

이 빠른 시작에서는 사용자 지정 단추가 포함된 AppBar를 앱에 추가했습니다.

탐색 모음을 만드는 방법은 이 문서에서 설명하지 않습니다. 탐색 모음을 만드는 방법을 알아보려면 빠른 시작: 탐색 모음 및 뒤로 단추 추가를 참조하세요.

다음을 통해 공유

사용자 지정 콘텐츠가 포함된 AppBar 추가(HTML)

사전 요구 사항

지침

2. 바 컨트롤 추가 및 명령 사용자 지정

요약

관련 항목

추가 리소스