Module sixtyfps::docs::widgets [−][src]
Expand description
Widgets
Widgets are not imported by default, and need to be imported from "sixtyfps_widgets.60"
Their appearance can change depending on the style
Button
Properties
text
(string): The text written in the button.icon
(image): The image to show in the button. Note that not all styles support drawing icons.pressed
: (bool): Set to true when the button is pressed.enabled
: (bool): Defaults to true. When false, the button cannot be pressed
Callbacks
clicked
Example
import { Button } from "sixtyfps_widgets.60"; Example := Window { Button { width: parent.width; height: parent.height; text: "Click Me"; clicked => { self.text = "Clicked"; } } }
CheckBox
Properties
text
(string): The text written next to the checkbox.checked
: (bool): Whether the checkbox is checked or not.
Callbacks
toggled
: The checkbox value changed
Example
import { CheckBox } from "sixtyfps_widgets.60"; Example := Window { width: 200px; height: 25px; CheckBox { width: parent.width; height: parent.height; text: "Hello World"; } }
SpinBox
Properties
value
(int): The value.minimum
(int): The minimum value (default: 0).maximum
(int): The maximum value (default: 100).
Example
import { SpinBox } from "sixtyfps_widgets.60"; Example := Window { width: 200px; height: 25px; SpinBox { width: parent.width; height: parent.height; value: 42; } }
Slider
Properties
value
(float): The value.minimum
(float): The minimum value (default: 0)maximum
(float): The maximum value (default: 100)
Callbacks
changed(float)
: The value was changed
Example
import { Slider } from "sixtyfps_widgets.60"; Example := Window { width: 200px; height: 25px; Slider { width: parent.width; height: parent.height; value: 42; } }
GroupBox
Properties
title
(string): A text written as the title of the group box.
Example
import { GroupBox } from "sixtyfps_widgets.60"; Example := Window { width: 200px; height: 100px; GroupBox { title: "A Nice Title"; Text { text: "Hello World"; color: blue; } } }
LineEdit
Properties
text
(string): The test being editedhas-focus
: (bool): Set to true when the line edit currently has the focusplaceholder-text
: (string): A placeholder text being shown when there is no text in the edit fieldenabled
: (bool): Defaults to true. When false, nothing can be entered
Callbacks
accepted
: Enter was pressededited
: Emitted when the text has changed because the user modified it
Example
import { LineEdit } from "sixtyfps_widgets.60"; Example := Window { width: 200px; height: 25px; LineEdit { width: parent.width; height: parent.height; placeholder-text: "Enter text here"; } }
ScrollView
A Scrollview contains a viewport that is bigger than the view and can be scrolled. It has scrollbar to interact with.
Properties
viewport-width
andviewport-height
(length): Thewidth
andlength
properties of the viewportviewport-x
andviewport-y
(length): Thex
andy
properties of the viewport. Usually these are negativevisible-width
andvisible-height
(length): The size of the visible area of the ScrollView (not including the scrollbar)
Example
import { ScrollView } from "sixtyfps_widgets.60"; Example := Window { width: 200px; height: 200px; ScrollView { width: 200px; height: 200px; viewport-width: 300px; viewport-height: 300px; Rectangle { width: 30px; height: 30px; x: 275px; y: 50px; background: blue; } Rectangle { width: 30px; height: 30px; x: 175px; y: 130px; background: red; } Rectangle { width: 30px; height: 30px; x: 25px; y: 210px; background: yellow; } Rectangle { width: 30px; height: 30px; x: 98px; y: 55px; background: orange; } } }
ListView
A ListView is like a Scrollview but it should have a for
element, and the content are
automatically layed out in a list.
Elements are only instantiated if they are visible
Properties
Same as ScrollView
Example
import { ListView } from "sixtyfps_widgets.60"; Example := Window { width: 150px; height: 150px; ListView { width: 150px; height: 150px; for data in [ { text: "Blue", color: #0000ff, bg: #eeeeee}, { text: "Red", color: #ff0000, bg: #eeeeee}, { text: "Green", color: #00ff00, bg: #eeeeee}, { text: "Yellow", color: #ffff00, bg: #222222 }, { text: "Black", color: #000000, bg: #eeeeee }, { text: "White", color: #ffffff, bg: #222222 }, { text: "Magenta", color: #ff00ff, bg: #eeeeee }, { text: "Cyan", color: #00ffff, bg: #222222 }, ] : Rectangle { height: 30px; background: data.bg; width: parent.width; Text { text: data.text; color: data.color; } } } }
StandardListView
Like ListView, but with a default delegate, and a model
property which is a model of type
StandardListViewItem
The StandardListViewItem
is equivalent to { text: string }
but will be improved in the future with icon
, checked
and so on (TODO)
Properties
Same as ListView, and in addition:
model
([StandardListViewItem]
): The modelcurrent-item
(int): The index of the currently active item. -1 mean none is selected, which is the default
Example
import { StandardListView } from "sixtyfps_widgets.60"; Example := Window { width: 150px; height: 150px; StandardListView { width: 150px; height: 150px; model: [ { text: "Blue"}, { text: "Red" }, { text: "Green" }, { text: "Yellow" }, { text: "Black"}, { text: "White"}, { text: "Magenta" }, { text: "Cyan" }, ]; } }
ComboBox
A button that, when clicked, opens a popup to select a value.
Properties
model
([string]): The list of possible valuescurrent-index
: (int): The index of the selected value (-1 if no value is selected)current-value
: (string): The currently selected textenabled
: (bool): When false, the combobox cannot be opened (default: true)
Callbacks
selected(string)
: A value was selected from the combo box. The argument is the currently selected value.
Example
import { ComboBox } from "sixtyfps_widgets.60"; Example := Window { width: 200px; height: 25px; ComboBox { width: preferred-width; height: preferred-height; model: ["first", "second", "third"]; current-value: "first"; } }
TabWidget
TabWidget is a container for a set of tabs. It can only have Tab
elements as children and only one tab will be visible at
a time.
Properties of the Tab
element
title
(string): The text written in the tab bar.
Example
import { TabWidget } from "sixtyfps_widgets.60"; Example := Window { width: 200px; height: 200px; TabWidget { Tab { title: "First"; Rectangle { background: orange; } } Tab { title: "Second"; Rectangle { background: pink; } } } }
HorizontalBox
, VerticalBox
, GridBox
That’s the same as HorizontalLayout
, VerticalLayout
or GridLayout
but the spacing and padding values
depending on the style instead of defaulting to 0.
Next: Layouting