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

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 트리거와 애니메이션
  4. 선택자[Selection]

선택자[Selection]

Selection 클래스

Selection은 아이템 리스트, 라디오 버튼 또는 피커(picker)와 같은 선택 컨트롤을 만드는 데 사용됩니다. Selection 클래스는 선택(selection)을 정의하고 하이레벨 비헤이비어를 관리하며 현재 값을 추적합니다. 다양한 Selectable 클래스의 객체는 선택할 수 있는 아이템을 정의합니다.

Selection API 소개

selection은 나타나는 노드에 연관됩니다. 예를 들어:

1
2
3
<Panel>
    <Selection/>
</Panel>

패널은 이제 selection 컨트롤로 간주됩니다. 이 패널의 자식인 Selectable과 Selected 같은 비헤이비어들은 이 패널의 Selection 비헤이비어를 발견할 것입니다.

Selectable 노드는 selection 컨트롤의 자식을 선택 가능하게 만드는 데 사용됩니다. 노드에 할당되면 selection 컨트롤을 찾을 때까지 컨트롤 부모를 반복 검색합니다.

Selection API의 함수는 사용자 인터렉션 API와 프로그래밍 API로 나뉩니다. 사용자 인터렉션 함수는 MaxCount 및 MinCount와 같은 Selection 요구 사항에 제약을 받습니다. 프로그래밍 방식의 함수는 원하는 상태로 설정할 수 있습니다. 그들은 제약받지 않습니다. 따라서 초기화 순서에 신경쓰지 않고도 값 바인딩 및 JavaScript 기반 동작을 쉽게 만들 수 있습니다.

Selection의 인터페이스

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

예제

다음 예제에서는 Selection을 사용하여 간단한 옵션 리스트를 만듭니다. 아이템을 눌러 selection 아이템을 토글합니다. 값은 현재 선택된 아이템을 추적하기 위해 JavaScript Observable에 바인딩 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<Panel ux:Class="MyItem" Color="#aaa">
    <string ux:Property="Label"/>
    <string ux:Property="Value"/>

    <Selectable Value="{ReadProperty this.Value}"/>
    <Text Value="{ReadProperty this.Label}"/>

    <WhileSelected>
        <Change this.Color="#ffc"/>
    </WhileSelected>
    <Tapped>
        <ToggleSelection/>
    </Tapped>
</Panel>

<JavaScript>
    var Observable = require("FuseJS/Observable")
    exports.values = Observable()

    exports.list = Observable("")
    exports.values.onValueChanged( module, function() {
        exports.list.value = exports.values.toArray().join(",")
    })
</JavaScript>
<StackPanel>
    <Selection Values="{values}"/>

    <MyItem Label="Big Red One" Value="sku-01"/>
    <MyItem Label="Small Green Two" Value="sku-02"/>
    <MyItem Label="Third Last One" Value="sku-03"/>
    <MyItem Label="Four Fore For" Value="sku-04"/>
    <MyItem Label="Point Oh-Five" Value="sku-05"/>

    <Text Value="Selected:" Margin="0,10,0,0"/>
    <Text Value="{list}"/>
</StackPanel>
Was this article helpful to you? Yes No

How can we help?