Skip to content

UI.Selectable

Name Mandatory Description Default Type
⬅️ Input The input of the shard, if any Any
Output ➡️ The resulting output of the shard Bool
Contents No The UI contents to wrap, contain, and detect for selection. none NoneShard[Shard]
IsSelected No Callback function for checking if the contents are currently selected. none NoneShard[Shard]
Clicked No Callback function for the contents of this shard is clicked. none NoneShard[Shard]
DoubleClicked No Callback function for the contents of this shard is clicked. none NoneShard[Shard]
ContextMenu No Callback function for the right-click context menu. none NoneShard[Shard]
DragData No Enables dragging and sets the data for drag operations none Any
ID No An optional ID value in case of ID conflicts. none StringVar(String)None

A wrapper that detects selection over the provided contents.

Examples

 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
37
38
39
40
41
42
43
44
45
46
47
48
@template(is-selected [idx] {
  currently-selected | Is(idx)
})

@template(select [idx] {
  idx > currently-selected | Log
})

@wire(ui-wire {
  UI.Window(
    Position: @f2(0 0)
    Anchor: Anchor::Center
    Width: 200
    Height: 200
    Flags: [WindowFlags::NoResize]
    Contents: {
      Once({
        1 >= currently-selected
        "" >= currently-selected-str
      })
      UI.CentralPanel(
        Contents: {
          UI.Selectable(
            Contents: {UI.Button("Select Button 1" {"Select Button 1 Clicked" | Log})}
            IsSelected: {@is-selected(1)}
            Clicked: {@select(1)}
          )
          UI.Selectable(
            Contents: {
              UI.Button("Select Button 2" {"Select Button 2 Clicked" | Log})
              "Another part of the same selectable as Select Button 2" | UI.Label(Wrap: true)
            }
            IsSelected: {@is-selected(2)}
            Clicked: {@select(2)}
          )

          currently-selected | ToString > currently-selected-str
          [
            "Currently selected: "
            currently-selected-str
          ] | String.Join | UI.Label
        }
      )
    }
  )
} Looped: true)

{ui-behavior: ui-wire}