Zenn
Open4

owlkettleでタブを作る

Nim
#
gui
#
owlkettle
NeoNeo

owlkettleでタブを作る。
・BoxとButton / ListBoxで並ばせる
・Appに現在のタブ番号を持たせて内容を表示
など

NeoNeo

よくあるブラウザに搭載されている、上から選択して下の画面で内容を表示するタイプを目指す。
するとWidgetの配置はこんな感じ

Box(orient = OrientY):
  Box(orient = OrientX):
    # 各タブをButtonとして配置
    for name in ...:
      Button:
        text = name
  # ここに現在のタブの内容を挿入
NeoNeo

タブ構造を作成できるWidgetを定義する。

viewable TabBox:
  tabs: Table[string, Widget]
  currentTab: string = ""

  adder add {.name: "".}:
    widget.hasTabs = true
    if name == "":
      widget.valTabs[$widget.valTabs.len] = child
    else:
      widget.valTabs[name] = child

タブの名前と内容(Widget)を紐づけたいのでTableを使用。currentTabは現在表示しているタブの名前を管理する。
タブの名前はadderを通して渡す

NeoNeo

完成。

viewable TabBox:
  tabs: OrderedTable[string, Widget]
  currentTab: string = ""

  adder add {.name: "".}:
    widget.hasTabs = true
    if name == "":
      widget.valTabs[$widget.valTabs.len] = child
    else:
      widget.valTabs[name] = child

method view(tabBox: TabBoxState): Widget =
  result = gui:
    Box(orient = OrientY):
      Box(orient = OrientX) {.expand: false.}:
        for name in tabBox.tabs.keys:
          Button:
            Label(text = name)
            style = if tabBox.currentTab == name: {ButtonFlat}
              else: {}
            proc clicked =
              tabBox.currentTab = name

      if tabBox.currentTab == "":
        Label(text = "No tab is selected")
      else:
        Box:
          insert tabBox.tabs[tabBox.currentTab]
  • OrderedTableに変更。
  • タブが選択されていればそのタブ用のButtonのstyleにButtonFlatを追加し、そのButtonの枠線を消去する(選んでいる感を出すため)
  • タブ未選択状態のときの画面を用意