다음을 통해 공유

빠른 시작: 플라이아웃 추가(HTML)

  • 아티클

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

이 빠른 시작에서는 플라이아웃을 만들고 스타일을 지정하는 방법에 대해 설명합니다. (Windows만 해당)

사전 요구 사항

JavaScript로 작성된 첫 번째 Windows 스토어 앱 빌드

플라이아웃에 대한 지침 및 검사 목록

1. 플라이아웃 만들기

이 예제에서는 사용자가 Buy 단추를 누를 때 플라이아웃이 단추 위에 나타납니다. 플라이아웃은 JavaScript용 Windows 라이브러리의 컨트롤인 WinJS.UI.Flyout이며 <body> 요소의 직계 자식이어야 합니다.

<body>
    <!-- Button that launches the confirmation Flyout. -->
    <button class="action" id="buyButton">Buy</button>

    <!-- Confirmation Flyout. -->
    <div id="confirmFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Confirm purchase flyout}">
        <div>Your account will be charged $252.</div>
        <button id="confirmButton">Complete Order</button>
    </div>
<body>

// Initialize WinJS controls.
WinJS.UI.processAll();

// Initialize event listeners.
document.getElementById("buyButton").addEventListener("click", showConfirmFlyout, false);
document.getElementById("confirmButton").addEventListener("click", confirmOrder, false);

// Command and Flyout functions.
function showConfirmFlyout() {
    showFlyout(confirmFlyout, buyButton, "top");
}
function showFlyout(flyout, anchor, placement) {
    flyout.winControl.show(anchor, placement);
}
function confirmOrder() {
    document.getElementById("confirmFlyout").winControl.hide();
}

2. 플라이아웃 스타일 지정

여기에 표시된 것처럼 표준 스타일의 옅은 UI 및 진한 UI 테마를 유지하거나 다음에 설명되는 것처럼 스타일을 사용자 지정할 수 있습니다.

밝은 스타일의 플라이아웃

어두운 스타일의 플라이아웃

 

플라이아웃의 다양한 CSS 속성을 사용자 지정할 수 있습니다.

속성 예

Font-family

텍스트 글꼴을 제어합니다.

 font-family:'Segoe UI';

Font-size

텍스트 크기를 제어합니다.

 font-size:9pt;

Color

텍스트 색을 제어합니다.

 color:rgb(0, 0, 0);

Background-color

표면의 배경색을 제어합니다.

 background-color:rgb(255, 255, 255);

Border

테두리의 두께, 색 및 선 스타일을 제어합니다.

 border:2px solid rgb(128, 128, 128);

Max-width

상자의 최대 너비를 제어합니다.

 max-width:400px;

 

이 예제는 HTML 플라이아웃 컨트롤 샘플에서 가져온 것이며 주로 기본 스타일 지정을 따릅니다.

    /* Flyout title. */
    .win-flyout:not(.win-menu) .win-type-x-large
    {
        font-weight: 300;
        margin-top: -13px;
        padding-bottom: 18px;
    }

    /* Flyout buttons. */
    .win-flyout:not(.win-menu) button,
    .win-flyout:not(.win-menu) input[type="button"]
    {
        margin-top: 16px;
        margin-left: 20px;
        float: right;
    }

이 예제는 이해를 돕기 위해 좀 더 명확한 시각적 요소를 포함하므로 다소 부자연스러울 수 있습니다.

    /* Flyout with attent-getting colors. */
    .win-flyout
    {
        background-color: yellow;
        border-color: red;
        color: green;
    }

스타일이 지정된 플라이아웃

요약

이 빠른 시작에서는 사용자 작업에 대한 응답으로 플라이아웃을 만들고 스타일을 지정했습니다.

관련 항목

WinJS.UI.Flyout

HTML 플라이아웃 컨트롤 샘플