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

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 네비게이션
  4. 네비게이터[Navigator]

네비게이터[Navigator]

네비게이터는 주문형(on-demand) 인스턴스 생성 및 페이지 재활용 기능이 있는 범용 탐색 컨테이너 입니다.

참고: 퓨즈의 네비게이션 시스템 전체를 보려면 먼저 네비게이션 가이드를 읽는 것이 좋습니다.

페이지(Pages)

네비게이터는 템플릿 모음을 자식으로 사용합니다. 이를 통해 필요에 따라 페이지를 인스턴스화하고 재활용 할 수 있습니다.

ux:Template 속성을 지정하여 노드를 템플릿으로 선언할 수 있습니다. 라우트의 경로는 ux:Template의 값을 이용합니다.

1
<Page ux:Template="matchPath">

템플릿에 대한 자세한 내용은 여기를 참조하십시오.

템플릿이 아닌 페이지도 사용할 수 있습니다. 페이지의 Name이 경로와 일치하는 데 사용됩니다:

1
<Page Name="matchPath">

이러한 페이지는 항상 하나의 인스턴스만 가지며 항상 재사용되며 절대로 제거되지 않습니다. 그렇지 않으면 템플릿 페이지와 동일하게 작동합니다.

다음은 템플릿 또는 비 템플릿 페이지 중 어느 것을 사용할지 결정하는 데 도움이 되는 몇 가지 일반적인 규칙입니다:

  • 같은 경로이지만 매개 변수가 다른 페이지간에 트랜지션이 필요한 경우 템플릿을 사용하십시오.
  • 비활성 상태인 경우에도 성능에 영향을 주는 페이지가 있거나 사용하지 않을 때 다른 이유로 페이지를 제거해야 하는 경우 템플릿을 사용하십시오.
  • 상태를 유지하기 위해 항상 존재해야 하거나 매우 자주 탐색되는 페이지가 있으면 비 템플릿을 사용하십시오.

하나의 네비게이터 내에서 템플릿 및 비 템플릿을 혼합할 수 있습니다.

트랜지션(Transitions)

Navigator에는 push(), goBack() 및 goto()의 동작과 일치하는 일련의 기본 트랜지션이 있습니다.

페이지 트랜지션을 완벽하게 제어하려면 PageView 클래스를 사용하십시오. 네비게이터처럼 작동하지만 표준 트랜지션이나 상태 변경이 없습니다.

예제

다음 예제는 라우터 및 네비게이터를 사용하는 기본 탐색 설정을 보여줍니다. 퓨즈의 네비게이션 시스템에 대한 전체 소개 및 적절한 예를 보려면 네비게이션 가이드를 참조하십시오.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<JavaScript>
    module.exports = {
        gotoFirst: function() { router.goto("firstPage"); },
        gotoSecond: function() { router.goto("secondPage"); }
    };
</JavaScript>

<Router ux:Name="router" />

<DockPanel>
    <Navigator DefaultPath="firstPage">
        <Page ux:Template="firstPage">
            <Text Alignment="Center">This is the first page.</Text>
        </Page>
        <Page ux:Template="secondPage">
            <Text Alignment="Center">This is the second page.</Text>
        </Page>
    </Navigator>

    <Grid Dock="Bottom" Columns="1*,1*">
        <Button Text="First page" Padding="20" Clicked="{gotoFirst}" />
        <Button Text="Second page" Padding="20" Clicked="{gotoSecond}" />
    </Grid>
</DockPanel>

네비게이션 정렬

네비게이터는 탐색하는 동안 개별 페이지 진행률 변경 사항을 사용합니다. 활성 페이지의 진행률은 0입니다. 페이지를 누르면 1에서 시작하여 즉시 0으로 전환됩니다. 이전에 활성화된 페이지는 -1이 됩니다. “back” 작업은 트랜지션을 되돌립니다.

-1, 0 및 1만 진행됩니다. 더 먼 거리는 계산되지 않으며 부분적인 값도 가능하지 않습니다.

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

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

Was this article helpful to you? Yes No

How can we help?