퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 네비게이션
  4. 페이지컨트롤[PageControl]

페이지컨트롤[PageControl]

PageControl 클래스

기본 선형 탐색을 위한 표준 전환(transitions), 사용자 상호 작용 및 페이지 처리 기능을 제공합니다.

예제

다음 예제에서는 PageControl의 기본 동작을 보여줍니다. 이 동작은 스와이프 동작에 대한 응답으로 페이지를 슬라이드합니다:

1
2
3
4
<PageControl>
    <Panel Background="Red"/>
    <Panel Background="Blue"/>
</PageControl>

PageControl은 라우터 아울렛(router outlet)이며, 라우터에서 제어할 수 있습니다. IsRouterOutlet 속성을 false로 설정하여 이 동작을 비활성화 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<JavaScript>
    module.exports = {
        gotoPage1: function() { router.goto("page1"); },
        gotoPage2: function() { router.goto("page2"); },
        gotoPage3: function() { router.goto("page3"); }
    };
</JavaScript>

<Router ux:Name="router" />

<PageControl>
    <Panel ux:Name="page1" Color="#e74c3c" Clicked="{gotoPage2}" />
    <Panel ux:Name="page2" Color="#2ecc71" Clicked="{gotoPage3}" />
    <Panel ux:Name="page3" Color="#3498db" Clicked="{gotoPage1}" />
</PageControl>

데이터 바인딩을 사용하면 Active 속성을 사용하여 현재 활성 페이지를 이름으로 설정할 수 있습니다. 다음 예제에는 3개의 페이지와 사용자를 첫 번째 페이지로 돌아 오는 버튼이 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<DockPanel>
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var currentPage = Observable("page1");
        function clickHandler() {
            currentPage.value = "page1";
        }
        module.exports = {
            clickHandler: clickHandler,
            currentPage: currentPage
        };
    </JavaScript>
    <PageControl Active="{currentPage}">
        <Panel Name="page1" Background="Red"/>
        <Panel Name="page2" Background="Green"/>
        <Panel Name="page3" Background="Blue"/>
    </PageControl>
    <Button Text="Home" Clicked="{clickHandler}" Dock="Bottom"/>
</DockPanel>

Slides 예제로 실제로 사용하는 방법을 살펴보십시오.

내비게이션 정렬

PageControl의 페이지는 앞에서 뒤쪽으로 정렬되며 첫 번째 자식이 앞에 있습니다. 앞으로 가는 것은 첫 번째 자식을 향해서 가는 것을 의미하고 뒤로 가는 것은 마지막 자식을 향해서 가는 것을 의미합니다.

PageControl은 불연속적인 변경이 아닌 페이지 간의 지속적인 탐색을 사용합니다.

내비게이션 정렬을 참조하십시오.

PageControl의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/controls/pagecontrol#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?