Skip to content

Latest commit

 

History

History
1772 lines (1212 loc) · 34.4 KB

widgets.md

File metadata and controls

1772 lines (1212 loc) · 34.4 KB
Raw

Widgets

BaseWidget

renderable BaseWidget

The base widget of all widgets. Supports redrawing the entire Application by calling <WidgetName>State.app.redraw()

Fields
  • sensitive: bool = true If the widget is interactive
  • sizeRequest: tuple[x, y: int] = (-1, -1) Requested widget size. A value of -1 means that the natural size of the widget will be used.
  • tooltip: string = "" The widget's tooltip is shown on hover
Setters
  • margin: int
  • margin: Margin
  • style: StyleClass
  • style: varargs[StyleClass]
  • style: HashSet[StyleClass]

BaseWindow

renderable BaseWindow of BaseWidget
Fields
  • All fields from BaseWidget
  • defaultSize: tuple[width, height: int] = (800, 600) Initial size of the window
  • fullscreened: bool
  • iconName: string
  • resizable: bool = true
Events
  • close: proc () Called when the window is closed

Window

renderable Window of BaseWindow
Fields
  • All fields from BaseWindow
  • title: string
  • titlebar: Widget Custom widget set as the titlebar of the window
  • child: Widget
Adders

  • All adders from BaseWindow

  • add Adds a child to the window. Each window may only have one child.

  • addTitlebar Sets a custom titlebar for the window

Example
Window:
  Label(text = "Hello, world")

Box

renderable Box of BaseWidget

A Box arranges its child widgets along one dimension.

Fields
  • All fields from BaseWidget
  • orient: Orient Orientation of the Box and its containing elements. May be one of OrientX (to orient horizontally) or OrientY (to orient vertically)
  • spacing: int Spacing between the children of the Box
  • children: seq[BoxChild[Widget]]
Adders

  • All adders from BaseWidget

  • add Adds a child to the Box. When expand is true, the child grows to fill up the remaining space in the Box. The hAlign and vAlign properties allow you to set the horizontal and vertical alignment of the child within its allocated area. They may be one of AlignFill, AlignStart, AlignEnd or AlignCenter.

    • expand = true
    • hAlign = AlignFill
    • vAlign = AlignFill
Example
Box:
  orient = OrientX
  Label(text = "Label")
  Button(text = "Button") {.expand: false.}
Box:
  orient = OrientY
  margin = 12
  spacing = 6
  for it in 0 ..< 5:
    Label(text = "Label " & $it)
HeaderBar {.addTitlebar.}:
  Box {.addLeft.}:
    style = [BoxLinked]
    for it in 0 ..< 5:
      Button {.expand: false.}:
        text = "Button " & $it
        proc clicked() =
          echo it

CenterBox

renderable CenterBox of BaseWidget
Fields
  • All fields from BaseWidget
  • startWidget: Widget
  • centerWidget: Widget
  • endWidget: Widget
  • baselinePosition: BaselinePosition = BaselineCenter
  • shrinkCenterLast: bool = false Since: GtkMinor >= 12
  • orient: Orient = OrientX
Adders

Overlay

renderable Overlay of BaseWidget
Fields
  • All fields from BaseWidget
  • child: Widget
  • overlays: seq[AlignedChild[Widget]]
Adders
  • All adders from BaseWidget
  • add
  • addOverlay
    • hAlign = AlignFill
    • vAlign = AlignFill

EmojiChooser

renderable EmojiChooser of BaseWidget
Fields
Events
  • emojiPicked: proc (emoji: string)

Label

renderable Label of BaseWidget

The default widget to display text. Supports rendering Pango Markup if useMarkup is enabled.

Fields
  • All fields from BaseWidget
  • text: string Text displayed by the label
  • xAlign: float = 0.5 Horizontal alignment of the text within the widget
  • yAlign: float = 0.5 Vertical alignment of the text within the widget
  • ellipsize: EllipsizeMode Determines whether to ellipsise the text in case space is insufficient to render all of it. May be one of EllipsizeNone, EllipsizeStart, EllipsizeMiddle or EllipsizeEnd
  • wrap: bool = false Enables/Disable wrapping of text
  • useMarkup: bool = false Determines whether to interpret the given text as Pango Markup
Example
Label:
  text = "Hello, world!"
  xAlign = 0.0
  ellipsize = EllipsizeEnd
Label:
  text = "Test ".repeat(50)
  wrap = true
Label:
  text = "<b>Bold</b>, <i>Italic</i>, <span font=\"20\">Font Size</span>"
  useMarkup = true

EditableLabel

renderable EditableLabel of BaseWidget
Fields
  • All fields from BaseWidget
  • text: string = ""
  • editing: bool = false Determines whether the edit view (editing = false) or the "read" view (editing = true) is being shown
  • enableUndo: bool = true
  • alignment: float = 0.0
Events
  • changed: proc (text: string) Fired every time text changes.
  • editStateChanged: proc (newEditState: bool) Fired every time editing changes.

Icon

renderable Icon of BaseWidget
Fields
Example
Icon:
  name = "list-add-symbolic"
Icon:
  name = "object-select-symbolic"
  pixelSize = 100

Picture

renderable Picture of BaseWidget
Fields
  • All fields from BaseWidget
  • pixbuf: Pixbuf
  • contentFit: ContentFit = ContentContain Requires GTK 4.8 or higher to fully work, compile with -d:gtkminor=8 to enable

Button

renderable Button of BaseWidget
Fields
  • All fields from BaseWidget
  • child: Widget
  • shortcut: string Keyboard shortcut
Setters
  • text: string
  • icon: string Sets the icon of the Button (see recommended_tools.md for a list of icons)
Events
  • clicked: proc ()
Adders
Example
Button:
  icon = "list-add-symbolic"
  style = [ButtonSuggested]
  proc clicked() =
    echo "clicked"

Button:
  text = "Delete"
  style = [ButtonDestructive]
Button:
  text = "Inactive Button"
  sensitive = false
Button:
  text = "Copy"
  shortcut = "<Ctrl>C"
  proc clicked() =
    app.writeClipboard("Hello, world!")

HeaderBar

renderable HeaderBar of BaseWidget
Fields
  • All fields from BaseWidget
  • title: BoxChild[Widget]
  • showTitleButtons: bool = true
  • decorationLayout: Option[string] = none(string)
  • left: seq[Widget]
  • right: seq[Widget]
Setters
  • windowControls: DecorationLayout
  • windowControls: Option[DecorationLayout]
Adders

  • All adders from BaseWidget

  • addTitle Adds a custom title widget to the HeaderBar. When expand is true, it grows to fill up the remaining space in the headerbar. The hAlign and vAlign properties allow you to set the horizontal and vertical alignment of the child within its allocated area. They may be one of AlignFill, AlignStart, AlignEnd or AlignCenter.

    • expand = false
    • hAlign = AlignFill
    • vAlign = AlignFill

  • addLeft Adds a widget to the left side of the HeaderBar.

  • addRight Adds a widget to the right side of the HeaderBar.

Example
Window:
  title = "Title"
  HeaderBar {.addTitlebar.}:
    Button {.addLeft.}:
      icon = "list-add-symbolic"
    Button {.addRight.}:
      icon = "open-menu-symbolic"

ScrolledWindow

renderable ScrolledWindow of BaseWidget
Fields
  • All fields from BaseWidget
  • child: Widget
  • propagateNaturalWidth: bool = false
  • propagateNaturalHeight: bool = false
Events
  • edgeOvershot: proc (edge: Edge) Called when the user attempts to scroll past limits of the scrollbar
  • edgeReached: proc (edge: Edge) Called when the user reaches the limits of the scrollbar
Adders

Entry

renderable Entry of BaseWidget
Fields
  • All fields from BaseWidget
  • text: string
  • placeholder: string Shown when the Entry is empty.
  • width: int = -1
  • maxWidth: int = -1
  • xAlign: float = 0.0
  • visibility: bool = true
  • invisibleChar: Rune = '*'.Rune
Events
  • changed: proc (text: string) Called when the text in the Entry changed
  • activate: proc () Called when the user presses enter/return
Example
Entry:
  text = app.text
  proc changed(text: string) =
    app.text = text

Entry:
  text = app.query
  placeholder = "Search..."
  proc changed(query: string) =
    app.query = query

  proc activate() =
    ## Runs when enter is pressed
    echo app.query

Entry:
  placeholder = "Password"
  visibility = false
  invisibleChar = '*'.Rune

Spinner

renderable Spinner of BaseWidget
Fields

SpinButton

renderable SpinButton of BaseWidget

Entry for entering numeric values

Fields
  • All fields from BaseWidget
  • digits: uint = 1 Number of digits
  • climbRate: float = 0.1
  • wrap: bool When the maximum (minimum) value is reached, the SpinButton will wrap around to the minimum (maximum) value.
  • min: float = 0.0 Lower bound
  • max: float = 100.0 Upper bound
  • stepIncrement: float = 0.1
  • pageIncrement: float = 1
  • pageSize: float = 0
  • value: float
Events
  • valueChanged: proc (value: float)
Example
SpinButton:
  value = app.value
  proc valueChanged(value: float) =
    app.value = value

Paned

renderable Paned of BaseWidget
Fields
  • All fields from BaseWidget
  • orient: Orient Orientation of the panes
  • initialPosition: int Initial position of the separator in pixels
  • first: PanedChild[Widget]
  • second: PanedChild[Widget]
Adders
  • All adders from BaseWidget
  • add
    • resize = true
    • shrink = false
Example
Paned:
  initialPosition = 200
  Box(orient = OrientY) {.resize: false.}:
    Label(text = "Sidebar")
  Box(orient = OrientY) {.resize: true.}:
    Label(text = "Content")

CustomWidget

renderable CustomWidget of BaseWidget
Fields
Events
  • mousePressed: proc (event: ButtonEvent): bool
  • mouseReleased: proc (event: ButtonEvent): bool
  • mouseMoved: proc (event: MotionEvent): bool
  • scroll: proc (event: ScrollEvent): bool
  • keyPressed: proc (event: KeyEvent): bool
  • keyReleased: proc (event: KeyEvent): bool

DrawingArea

renderable DrawingArea of CustomWidget

Allows you to render 2d scenes using cairo. The owlkettle/cairo module provides bindings for cairo.

Fields
Events
  • draw: proc (ctx: CairoContext; size: (int, int)): bool Called when the widget is rendered. Redraws the application if the callback returns true.
Example
DrawingArea:
  ## You need to import the owlkettle/cairo module in order to use CairoContext
  proc draw(ctx: CairoContext; size: tuple[width, height: int]): bool =
    ctx.rectangle(100, 100, 300, 200)
    ctx.source = (0.0, 0.0, 0.0)
    ctx.stroke()

GlArea

renderable GlArea of CustomWidget

Allows you to render 3d scenes using OpenGL.

Fields
  • All fields from CustomWidget
  • useEs: bool = false
  • requiredVersion: tuple[major, minor: int] = (4, 3)
  • hasDepthBuffer: bool = true
  • hasStencilBuffer: bool = false
Events
  • setup: proc (size: (int, int)): bool Called after the OpenGL Context is initialized. Redraws the application if the callback returns true.
  • render: proc (size: (int, int)): bool Called when the widget is rendered. Your rendering code should be executed here. Redraws the application if the callback returns true.

ColorButton

renderable ColorButton of BaseWidget
Fields
  • All fields from BaseWidget
  • color: tuple[r, g, b, a: float] = (0.0, 0.0, 0.0, 1.0) Red, Geen, Blue, Alpha as floating point numbers in the range [0.0, 1.0]
  • useAlpha: bool = false
Events
  • changed: proc (color: tuple[r, g, b, a: float])

Switch

renderable Switch of BaseWidget
Fields
Events
  • changed: proc (state: bool)
Example
Switch:
  state = app.state
  proc changed(state: bool) =
    app.state = state

ToggleButton

renderable ToggleButton of Button
Fields
  • All fields from Button
  • state: bool
Events
  • changed: proc (state: bool)
Example
ToggleButton:
  text = "Current State: " & $app.state
  state = app.state
  proc changed(state: bool) =
    app.state = state

LinkButton

renderable LinkButton of Button

A clickable link.

Fields
  • All fields from Button
  • uri: string
  • visited: bool

CheckButton

renderable CheckButton of BaseWidget
Fields
Events
  • changed: proc (state: bool)
Example
CheckButton:
  state = app.state
  proc changed(state: bool) =
    app.state = state

RadioGroup

renderable RadioGroup of BaseWidget

A list of options selectable using radio buttons.

Fields
  • All fields from BaseWidget
  • spacing: int = 3 Spacing between the rows
  • rowSpacing: int = 6 Spacing between the radio button and
  • orient: Orient = OrientY Orientation of the list
  • children: seq[Widget]
  • selected: int Currently selected index, may be smaller or larger than the number of children to represent no option being selected
Events
  • select: proc (index: int)
Adders
Example
RadioGroup:
  selected = app.selected
  proc select(index: int) =
    app.selected = index

  Label(text = "Option 0", xAlign = 0)
  Label(text = "Option 1", xAlign = 0)
  Label(text = "Option 2", xAlign = 0)

BasePopover

renderable BasePopover of BaseWidget
Fields
  • All fields from BaseWidget
  • hasArrow: bool = true
  • offset: tuple[x, y: int] = (0, 0)
  • position: PopoverPosition = PopoverBottom

Popover

renderable Popover of BasePopover
Fields
Adders

PopoverMenu

renderable PopoverMenu of BasePopover

A popover with multiple pages. It is usually used to create a menu with nested submenus.

Fields
  • All fields from BasePopover
  • pages: Table[string, Widget]
Adders

  • All adders from BasePopover

  • add Adds a page to the popover menu.

    • name = "main"

MenuButton

renderable MenuButton of BaseWidget
Fields
  • All fields from BaseWidget
  • child: Widget
  • popover: Widget
Setters
  • text: string
  • icon: string Sets the icon of the MenuButton. Typically open-menu is used. See recommended_tools.md for a list of icons.
Adders
Example
MenuButton {.addRight.}:
  icon = "open-menu"
  PopoverMenu:
    Box:
      Label(text = "My Menu")

ModelButton

renderable ModelButton of BaseWidget
Fields
  • All fields from BaseWidget
  • text: string
  • icon: string The icon of the ModelButton (see recommended_tools.md for a list of icons)
  • shortcut: string
  • menuName: string
Events
  • clicked: proc ()
Example
PopoverMenu:
  Box:
    orient = OrientY
    for it in 0 ..< 10:
      ModelButton:
        text = "Menu Entry " & $it
        proc clicked() =
          echo "Clicked " & $it

SearchEntry

renderable SearchEntry of BaseWidget
Fields
  • All fields from BaseWidget
  • text: string
  • searchDelay: uint = 100 Determines the minimum time after a searchChanged event occurred before the next can be emitted. Since: GtkMinor >= 8
  • placeholderText: string = "Search" Since: GtkMinor >= 10
Events
  • activate: proc () Triggered when the user "activated" the search e.g. by hitting "enter" key while SearchEntry is in focus.
  • nextMatch: proc () Triggered when the user hits the "next entry" keybinding while the search entry is in focus, which is Ctrl-g by default.
  • previousMatch: proc () Triggered when the user hits the "previous entry" keybinding while the search entry is in focus, which is Ctrl-Shift-g by default.
  • changed: proc (searchString: string) Triggered when the user types in the SearchEntry.
  • stopSearch: proc () Triggered when the user "stops" a search, e.g. by hitting the "Esc" key while SearchEntry is in focus.

Separator

renderable Separator of BaseWidget

A separator line.

Fields

TextView

renderable TextView of BaseWidget

A text editor with support for formatted text.

Fields
  • All fields from BaseWidget
  • buffer: TextBuffer The buffer containing the displayed text.
  • monospace: bool = false
  • cursorVisible: bool = true
  • editable: bool = true
  • acceptsTab: bool = true
  • indent: int = 0
  • wrapMode: WrapMode = WrapNone
  • textMargin: Margin

ListBoxRow

renderable ListBoxRow of BaseWidget

A row in a ListBox.

Fields
Events
  • activate: proc ()
Adders
Example
ListBox:
  for it in 0 ..< 10:
    ListBoxRow {.addRow.}:
      proc activate() =
        echo it

      Label(text = $it)

ListBox

renderable ListBox of BaseWidget
Fields
  • All fields from BaseWidget
  • rows: seq[Widget]
  • selectionMode: SelectionMode
  • selected: HashSet[int] Indices of the currently selected rows
Events
  • select: proc (rows: HashSet[int]) Called when the selection changed. rows contains the indices of the newly selected rows.
Adders

  • All adders from BaseWidget

  • addRow Adds a row to the list. The added child widget must be a ListBoxRow.

  • add

Example
ListBox:
  for it in 0 ..< 10:
    Label(text = $it)

FlowBoxChild

renderable FlowBoxChild of BaseWidget
Fields
Adders
Example
FlowBox:
  columns = 1 .. 5
  for it in 0 ..< 10:
    FlowBoxChild {.addChild.}:
      Label(text = $it)

FlowBox

renderable FlowBox of BaseWidget
Fields
  • All fields from BaseWidget
  • homogeneous: bool
  • rowSpacing: int
  • columnSpacing: int
  • columns: HSlice[int, int] = 1 .. 5
  • selectionMode: SelectionMode
  • children: seq[Widget]
Adders
Example
FlowBox:
  columns = 1 .. 5
  for it in 0 ..< 10:
    Label(text = $it)

Frame

renderable Frame of BaseWidget
Fields
  • All fields from BaseWidget
  • label: string
  • align: tuple[x, y: float] = (0.0, 0.0)
  • child: Widget
Adders
Example
Frame:
  label = "Frame Title"
  align = (0.2, 0.0)
  Label:
    text = "Content"

DropDown

renderable DropDown of BaseWidget

A drop down that allows the user to select an item from a list of items.

Fields
  • All fields from BaseWidget
  • items: seq[string]
  • selected: int Index of the currently selected item
  • enableSearch: bool
  • showArrow: bool = true
Events
  • select: proc (item: int)
Example
DropDown:
  items = @["Option 1", "Option 2", "Option 3"]
  selected = app.selectedItem
  proc select(itemIndex: int) =
    app.selectedItem = itemIndex

Grid

renderable Grid of BaseWidget

A grid layout.

Fields
  • All fields from BaseWidget
  • children: seq[GridChild[Widget]]
  • rowSpacing: int Spacing between the rows of the grid
  • columnSpacing: int Spacing between the columns of the grid
  • rowHomogeneous: bool Whether all rows should have the same width
  • columnHomogeneous: bool Whether all columns should have the same height
Setters
  • spacing: int Sets the spacing between the rows and columns of the grid.
  • homogeneous: bool
Adders

  • All adders from BaseWidget

  • add Adds a child at the given location to the grid. The location of the child within the grid can be set using the x, y, width and height properties. The hAlign and vAlign properties allow you to set the horizontal and vertical alignment of the child within its allocated area. They may be one of AlignFill, AlignStart, AlignEnd or AlignCenter.

    • x = 0
    • y = 0
    • width = 1
    • height = 1
    • hExpand = false
    • vExpand = false
    • hAlign = AlignFill
    • vAlign = AlignFill
Example
Grid:
  spacing = 6
  margin = 12
  Button {.x: 1, y: 1, hExpand: true, vExpand: true.}:
    text = "A"
  Button {.x: 2, y: 1.}:
    text = "B"
  Button {.x: 1, y: 2, width: 2, hAlign: AlignCenter.}:
    text = "C"

Fixed

renderable Fixed of BaseWidget

A layout where children are placed at fixed positions.

Fields
  • All fields from BaseWidget
  • children: seq[FixedChild[Widget]]
Adders

  • All adders from BaseWidget

  • add Adds a child at the given position

    • x = 0.0
    • y = 0.0
Example
Fixed:
  Label(text = "Fixed Layout") {.x: 200, y: 100.}

ContextMenu

renderable ContextMenu

Adds a context menu to a widget. Context menus are shown when the user right clicks the widget.

Fields
  • child: Widget
  • menu: Widget
  • controller: GtkEventController = GtkEventController(nil)
Adders
  • add
  • addMenu
Example
ContextMenu:
  Label:
    text = "Right click here"
  PopoverMenu {.addMenu.}:
    hasArrow = false
    Box(orient = OrientY):
      for it in 0 ..< 3:
        ModelButton:
          text = "Menu Entry " & $it

LevelBar

renderable LevelBar of BaseWidget
Fields
  • All fields from BaseWidget
  • value: float = 0.0
  • min: float = 0.0
  • max: float = 1.0
  • inverted: bool = false
  • mode: LevelBarMode = LevelBarContinuous
  • orient: Orient = OrientX
Example
LevelBar:
  value = 0.2
  min = 0
  max = 1
LevelBar:
  value = 2
  max = 10
  orient = OrientY
  mode = LevelBarDiscrete

Calendar

renderable Calendar of BaseWidget

Displays a calendar

Fields
  • All fields from BaseWidget
  • date: DateTime
  • markedDays: seq[int] = @[]
  • showDayNames: bool = true
  • showHeading: bool = true
  • showWeekNumbers: bool = true
Events
  • daySelected: proc (date: DateTime)
  • nextMonth: proc (date: DateTime)
  • prevMonth: proc (date: DateTime)
  • nextYear: proc (date: DateTime)
  • prevYear: proc (date: DateTime)
Example
Calendar:
  date = app.date
  proc select(date: DateTime) =
    ## Shortcut for handling all calendar events (daySelected,
    ## nextMonth, prevMonth, nextYear, prevYear)
    app.date = date

DialogButton

renderable DialogButton

A button which closes the currently open dialog and sends a response to the caller. This widget can only be used with the addButton adder of Dialog or BuiltinDialog.

Fields
  • text: string
  • response: DialogResponse
Setters
  • res: DialogResponseKind
  • style: varargs[StyleClass] Applies CSS classes to the button. There are some pre-defined classes available: ButtonSuggested, ButtonDestructive, ButtonFlat, ButtonPill or ButtonCircular. You can also use custom CSS classes using StyleClass("my-class"). Consult the GTK4 documentation for guidance on what to use.
  • style: HashSet[StyleClass] Applies CSS classes to the button.
  • style: StyleClass Applies CSS classes to the button.

Dialog

renderable Dialog of Window

A window which can contain DialogButton widgets in its header bar.

Fields
  • All fields from Window
  • buttons: seq[DialogButton]
Adders
  • All adders from Window
  • addButton
Example
Dialog:
  title = "My Dialog"
  defaultSize = (300, 200)
  DialogButton {.addButton.}:
    text = "Ok"
    res = DialogAccept
  DialogButton {.addButton.}:
    text = "Cancel"
    res = DialogCancel
  Label(text = "Hello, world!")

BuiltinDialog

renderable BuiltinDialog of BaseWidget

Base widget for builtin dialogs. If you want to create a custom dialog, you should use Window or Dialog instead.

Fields
  • All fields from BaseWidget
  • title: string
  • buttons: seq[DialogButton]
Adders

FileChooserDialog

renderable FileChooserDialog of BuiltinDialog

A dialog for opening/saving files or folders.

Fields
  • All fields from BuiltinDialog
  • action: FileChooserAction
  • selectMultiple: bool = false
  • initialPath: string Path of the initially shown folder
  • filenames: seq[string] The selected file paths
Example
FileChooserDialog:
  title = "Open a File"
  action = FileChooserOpen
  selectMultiple = true
  DialogButton {.addButton.}:
    text = "Cancel"
    res = DialogCancel
  DialogButton {.addButton.}:
    text = "Open"
    res = DialogAccept
    style = [ButtonSuggested]

ColorChooserDialog

renderable ColorChooserDialog of BuiltinDialog

A dialog for choosing a color.

Fields
  • All fields from BuiltinDialog
  • color: tuple[r, g, b, a: float] = (0.0, 0.0, 0.0, 1.0)
  • useAlpha: bool = false
Example
ColorChooserDialog:
  color = (1.0, 0.0, 0.0, 1.0)
  useAlpha = true

MessageDialog

renderable MessageDialog of BuiltinDialog

A dialog for showing a message to the user.

Fields
Example
MessageDialog:
  message = "Hello, world!"
  DialogButton {.addButton.}:
    text = "Ok"
    res = DialogAccept

AboutDialog

renderable AboutDialog of BaseWidget
Fields
  • All fields from BaseWidget
  • programName: string
  • logo: string
  • copyright: string
  • version: string
  • license: string
  • credits: seq[(string, seq[string])]
Example
AboutDialog:
  programName = "My Application"
  logo = "applications-graphics"
  version = "1.0.0"
  credits = @{"Code": @["Erika Mustermann", "Max Mustermann"],
              "Art": @["Max Mustermann"]}

Scale

renderable Scale of BaseWidget

A slider for choosing a numeric value within a range.

Fields
  • All fields from BaseWidget
  • min: float = 0 Lower end of the range displayed by the scale
  • max: float = 100 Upper end of the range displayed by the scale
  • value: float = 0 The value the Scale widget displays. Remember to update it via your valueChanged proc to reflect the new value on the Scale widget.
  • marks: seq[ScaleMark] = @[] Adds marks to the Scale at points where ScaleMark.value would be placed. If ScaleMark.label is provided, it will be rendered next to the mark. ScaleMark.position determines the mark's position (and its label) relative to the scale. Note that ScaleLeft and ScaleRight are only sensible when the Scale is vertically oriented (orient = OrientY), while ScaleTop and ScaleBottom are only sensible when it is horizontally oriented (orient = OrientX)
  • inverted: bool = false Determines whether the min and max value of the Scale are ordered (low value) left => right (high value) in the case of inverted = false or (high value) left <= right (low value) in the case of inverted = true.
  • showValue: bool = true Determines whether to display the numeric value as a label on the widget (showValue = true) or not (showValue = false)
  • stepSize: float = 5 Determines the value increment/decrement when the widget is in focus and the user presses arrow keys.
  • pageSize: float = 10 Determines the value increment/decrement when the widget is in focus and the user presses page keys. Typically larger than stepSize.
  • orient: Orient = OrientX The orientation of the widget. Orients the widget either horizontally (orient = OrientX) or vertically (orient = OrientY)
  • showFillLevel: bool = true Determines whether to color the Scale from the "origin" to the place where the slider on the Scale sits. The Scale is filled left => right/top => bottom if inverted = false and left <= right/top <= bottom if inverted = true
  • precision: int64 = 1 Number of decimal places to display for the value. precision = 1 enables values like 1.2, while precision = 2 enables values like 1.23 and so on.
  • valuePosition: ScalePosition Specifies where the label of the Scale widget's value should be placed. This setting has no effect if showValue = false.
Events
  • valueChanged: proc (newValue: float) Emitted when the range value changes from an interaction triggered by the user.
Example
Scale:
  value = app.value
  showFillLevel = false
  min = 0
  max = 1
  marks = @[ScaleMark(some("Just a mark"), ScaleLeft, 0.5)]
  inverted = true
  showValue = false
  proc valueChanged(newValue: float) =
    echo "New value is ", newValue
    app.value = newValue

Video

renderable Video of BaseWidget
Fields
  • All fields from BaseWidget
  • autoplay: bool = false
  • loop: bool = false
  • mediaStream: MediaStream
Setters
  • fileName: string
  • file: GFile

MediaControls

renderable MediaControls of BaseWidget
Fields
  • All fields from BaseWidget
  • mediaStream: MediaStream

Expander

renderable Expander of BaseWidget

Container that shows or hides its child depending on whether it is expanded/collapsed.

Fields
  • All fields from BaseWidget
  • label: string The clickable header of the Expander. Overwritten by labelWidget if it is provided via adder.
  • labelWidget: Widget The clickable header of the Expander. Overwrites label if provided.
  • expanded: bool = false Determines whether the body of the Expander is shown
  • child: Widget Determines the body of the Expander
  • resizeToplevel: bool = false
  • useMarkup: bool = false
  • useUnderline: bool = false
Events
  • activate: proc (activated: bool) Triggered whenever Expander is expanded or collapsed
Adders
Example
Expander:
  label = "Expander"
  Label:
    text = "Content"
Expander:
  label = "Expander"
  expanded = app.expanded
  proc activate(activated: bool) =
    app.expanded = activated

  Label:
    text = "Content"
Expander:
  Label {.addLabel.}:
    text = "Widget Label"
  Label:
    text = "Content"

PasswordEntry

renderable PasswordEntry of BaseWidget
Fields
  • All fields from BaseWidget
  • text: string
  • activatesDefault: bool = true
  • placeholderText: string = "Password"
  • showPeekIcon: bool = true
Events
  • activate: proc () Triggered when the user "activated" the entry e.g. by hitting "enter" key while PasswordEntry is in focus.
  • changed: proc (password: string) Triggered when the user types in the PasswordEntry.

ProgressBar

renderable ProgressBar of BaseWidget

A progress bar widget to show progress being made on a long-lasting task

Fields
  • All fields from BaseWidget
  • ellipsize: EllipsizeMode = EllipsizeEnd Determines how the text gets ellipsized if showText = true and text overflows.
  • fraction: float = 0.0 Determines how much the ProgressBar is filled. Must be between 0.0 and 1.0.
  • inverted: bool = false
  • pulseStep: float = 0.1
  • showText: bool = false
  • text: string = ""

ActionBar

renderable ActionBar of BaseWidget

A Bar for actions to execute in a given context. Can be hidden with intro- and outro-animations.

Fields
  • All fields from BaseWidget
  • centerWidget: Widget
  • packStart: seq[Widget] Widgets shown on the start of the ActionBar
  • packEnd: seq[Widget] Widgets shown on the end of the ActionBar
  • revealed: bool
Adders

ListView

renderable ListView of BaseWidget
Fields
  • All fields from BaseWidget
  • size: int Number of items
  • selectionMode: SelectionMode
  • selected: HashSet[int] Indices of the currently selected items.
  • showSeparators: bool = false
  • singleClickActivate: bool = false
  • enableRubberband: bool = false
Events
  • viewItem: proc (index: int): Widget
  • select: proc (rows: HashSet[int])
  • activate: proc (index: int)

ColumnView

renderable ColumnView of BaseWidget
Fields
  • All fields from BaseWidget
  • rows: int Number of rows
  • columns: seq[ColumnViewColumn]
  • selectionMode: SelectionMode
  • selected: HashSet[int] Indices of the currently selected rows
  • showRowSeparators: bool = false
  • showColumnSeparators: bool = false
  • singleClickActivate: bool = false
  • enableRubberband: bool = false
  • reorderable: bool = false
Events
  • viewItem: proc (row, column: int): Widget
  • select: proc (rows: HashSet[int])
  • activate: proc (index: int)