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

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

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

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

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

사전 요구 사항

지침

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

  1. Microsoft Visual Studio를 시작합니다.

  2. 시작 페이지 탭에서 새 프로젝트를 클릭합니다. 새 프로젝트 대화 상자가 열립니다.

  3. 설치됨 창에서 템플릿JavaScript를 확장하고 Windows 스토어 앱 템플릿 종류를 클릭합니다. JavaScript에 사용할 수 있는 프로젝트 템플릿이 대화 상자의 가운데 창에 표시됩니다.

  4. 가운데 창에서 빈 앱 프로젝트 템플릿을 선택합니다.

  5. 이름 입력란에 사용자 지정 AppBar 데모를 입력합니다.
  6. 확인을 클릭하여 프로젝트를 만듭니다.

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를 사용하여 런타임에 AppBarAppBarCommand 컨트롤을 만들 수 있습니다. 이 예제에서는 default.html의 HTML 태그에서 선언적으로 AppBar를 만듭니다. 예제에는 7개의 AppBarCommand 컨트롤이 있습니다.

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

  1. 솔루션 탐색기에서 솔루션 루트의 default.html 파일을 엽니다.
  2. <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를 앱에 추가했습니다.

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

관련 항목

WinJS.UI.AppBar
WinJS.UI.AppBarCommand.type
WinJS.UI.AppBarCommand.flyout
빠른 시작: 플라이아웃 추가

 

 

표시:
© 2017 Microsoft