Skip to content

Latest commit

 

History

History
1530 lines (1057 loc) · 67.4 KB

supported-wx-components.md

File metadata and controls

1530 lines (1057 loc) · 67.4 KB
Raw

Supported WX Components



WX Widgets supported and managed by re-wx can all be found in the rewx.components module.

Common practice is to import them under an alias

from rewx import components as c

...

def my_stuff(props):
    return wsx(
      [c.Block, {orient:wx.HORIZONTAL},
        [c.TextCtrl, {value: 'Hello!'}]]
    )

Available Components:

ActivityIndicator

Official WXPython docs:

Example:

from components import ActivityIndicator

def example(props):
    return create_element(ActivityIndicator, {'start': props['is_loading']})

Available Props:

key Type Description
start boolean Controls whether or not the spinner is animating
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
style any style is context dependent
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

Block

Block is a wrapped version of wx.Panel which automatically adds children to an internal wx.BoxSizer(). This is the bread and butter of layout control in re-wx. Think of it as a div in HTML.

Example:

from components import Block, TextCtrl, Button

def example(props):
    return wsx(
      [Block, {'orient': wx.VERTICAL},
        [Block, {'orient': wx.HORIZONTAL, 'flag': wx.EXPAND},
          [TextCtrl, {'on_change': props['my_handler']}],
          [Button, {'on_click': props['handle_submit']}]]]
    )

Available Props:

key Type Description
orient int Controls the direction of the sizer. wx.HORIZONTAL or wx.VERTICAL
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.
on_size callable Called when the size of the window changes.

Button

Your basic wx.Button.

Example:

def button_example(props):
    return create_element(Button, {'label': 'Click me!', 'on_click': props['handler']})

Available Props:

key Type Description
label string The label displayed on the button
label_markup string The label displayed on the button with wx.Control.SetLabelMarkup
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
style any style is context dependent
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

BitmapButton

BitmapButton is a button which uses an image rather than a text label. Use the uri prop to specify the image you want displayed.

Example:

def button_example(props):
    return create_element(BitmapButton, {
        'uri': 'path/to/your/image.png',
        'on_click': props['handler']})

Availble Props:

key Type Description
uri string filepath to the image you want displayed. re-wx will handle loading it and turning it into a bitmap
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
style any style is context dependent
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

CalendarCtrl

CalendarCtrl is a premade date-picker.

Example:

def calendar_example(props):
    return create_element(CalendarCtrl, {
        'selected_date': datetime.now(),
        'on_change': props['handle_change']})

Availble Props:

key Type Description
selected_date datetime sets the value of the date selected in the widget
display_holidays boolean toggles whether or not to display holidays on the calendar
allow_month_change boolean controls whether or not the calendar can change to different months
on_change callable Calls the supplied function when the user changes the selected date
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
style any style is context dependent
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

CheckBox

The humble checkbox. You give it a clickie, it goes on or off.

Example:

def example(props):
    return create_element(CheckBox, {
        'value': True,
        'on_change': props['handle_change']})

Availble Props:

key Type Description
label str The label displayed next to the CheckBox
value boolean Whether the checkbox is selected (True) or not (False)
on_change callable Calls the supplied function when the checkbox is clicked
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag

DirPickerCtrl

Control for choosing a directory path.

A wx.DirPickerCtrl with default style and with an added wx.FileDropTarget for MS Windows. In GTK the wx.DirPickerCtrl will accept file drop events.

Example:

return wsx(
    [ DirPickerCtrl, {
        'path': '~`,
        'on_change': handle_path_change,
        }
    ],

Availble Props:

key Type Description
label str
path str The currently selected path, if any.
on_change callable When the path changes, called with wx.FileDirPickerEvent.
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
text_font wx.Font The font used for the wx.TextControl which is displayed for MS Windows.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag

ComboBox

Alias: Dropdown

Example:

def example(props):
    return create_element(ComboBox, {
        'selected': props['selected'],
        'choices': ['one', 'two', 'three', 'four'],
        'on_change': props['handle_change']})

Availble Props:

key Type Description
value str The value to display in the textctrl part of the dropdown
choices [str] A list of strings to display in the dropdown
on_change callable Calls the supplied function when an item in the dropdown is selected
on_input callable calls the supplied function when the user types into the textctrl portion of the dropdown
style int See available styles in the WXPython docs
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag

FilePickerCtrlOpen

A wx.FilePickerCtrl with default style wx.FLP_OPEN | wx.FLP_FILE_MUST_EXIST.

Example:

return wsx(
    [ FilePickerCtrlOpen, {
        'path': '~/file.txt`,
        'on_change': handle_path_change,
        }
    ],

Availble Props:

key Type Description
label str
path str The currently selected path, if any.
on_change callable When the path changes, called with wx.FileDirPickerEvent.
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag

FilePickerCtrlSave

A wx.FilePickerCtrl with style wx.FLP_SAVE.

Example:

return wsx(
    [ FilePickerCtrlOpen, {
        'path': '~/file.txt',
        'wildcard': '*.txt',
        'on_change': handle_path_change,
        }
    ],

Availble Props:

key Type Description
label str
path str The currently selected path, if any.
on_change callable When the path changes, called with wx.FileDirPickerEvent.
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
wildcard str A wildcard which defines user-selectable files. This prop, once set, cannot be changed.

FlexGrid

Like Block, FlexGrid is a wrapped version of wx.Panel which automatically adds children to an internal wx.FlexGridSizer.

The FlexGridSizer “lays out its children in a two-dimensional table with all table fields in one row having the same height and all fields in one column having the same width, but all rows or all columns are not necessarily the same height or width as in the wx.GridSizer.”

Use this for liquid grid layout like CSS display:grid;.

Example:

from components import FlexGrid, StaticText

return wsx(
    [FlexGrid, {
        'cols': 2,
        'gap': wx.Size(8,5),
        },
        [StaticText, {'label':'row 1 column 1'}],
        [StaticText, {'label':'row 1 column 2'}],
        [StaticText, {'label':'row 2 column 1'}],
        [StaticText, {'label':'row 2 column 2'}],
    ])

Available Props:

key Type Description
cols int The number of columns in the grid
gap wx.Size the size of the gap between grid items ((horizontal, vertical))
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

Frame

This is the bedrock window to which all other components attach. There must be at least one of these in order for WX to bootstrap its GUI, and should must be at the root of your component tree.

Example:

def example(props):
    return create_element(Frame, {'title': 'Hello world!'})

Note: The frame doesn't have to be created or managed by re-wx. Because re-wx outputs vanilla WX objects after rendering, you can attach them to an existing frame created elsewhere in the traditional WX manner.

app = wx.App()
frame = wx.Frame(None, title='Hello world!')
my_panel = render(my_elements, frame)
frame.Show()
app.MainLoop()

Availble Props:

key Type Description
title str The text which displays in the program bar
show boolean Whether or not to show the Frame
icon_uri str File path to the icon to display in the program bar
style int See available styles in the WXPython docs
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component

Gauge

Example:

def example(props):
    return create_element(ComboBox, {
        'selected': props['selected'],
        'choices': ['one', 'two', 'three', 'four'],
        'on_change': props['handle_change']})

Availble Props:

key Type Description
value int The the current value of the gauge
range int Sets the maximum value of the gauge
pulse boolean when True, ignores value and range props and pulses on/off
style int See available styles in the WXPython docs
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag

Grid

Like, Block, Grid is a wrapped version of wx.Panel which automatically adds children to an internal wx.GridSizer().

Example:

from components import Block, TextCtrl, Button

def example(props):
    return wsx(
      [Grid, {'orient': wx.VERTICAL},
        [TextCtrl, {'on_change': props['my_handler']}],
        [Button, {'on_click': props['handle_submit']}]]
    )

Available Props:

key Type Description
cols int The number of columns in the grid
gap (int, int) the size of the gap between grid items ((horizontal, vertical))
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

ListCtrl

The wx.ListCtrl, while extremely powerful, has a super awkward and fiddly API. To tame this, re-wx only exposes a subset of the ListCtrl's functionality and wraps it all up in a more declarative, straight forward API geared towards showing tables of information. However, if you need the full, unadultered power of ListCtrl, you can always use a Ref to grab a handle to the concrete wx instance.

Example:

some_data = [
    {'name': 'Timmy',
     'age': 12,
     'occupation': 'Child'},
    {'name': 'Buzz',
     'age': 48,
     'occupation': 'Astronaut'},
    {'name': 'Cloud',
     'age': 28,
     'occupation': 'Avalanche'},
    {'name': 'Spike',
     'age': 27,
     'occupation': 'Bounty Hunter'},
]

column_definitions = [
    {'title': 'NAME', 'column': lambda item: item['name']},
    {'title': 'AGE', 'column': lambda item: str(item['age'])},
    {'title': 'NAME', 'column': lambda item: item['occupation']}
]

def listctrl_example(props):
    return create_element(ListCtrl, {
        'column_defs': column_definitions,
        'data': some_data})

Understanding the column_defs and data props

data is a list of any arbirary type. It could be a list of lists, list of maps, or any List[A].

column_defs is how you define (a) what the columns of your table are, and (b) how the individual items in that column gets formatted. It's expressed as a list of maps, where each item in the list represents a column in your table. The title is used as the Column Header, and the column key should be a function (A -> String) which transforms an individual item from data into string form for display in the table.

Availble Props:

key Type Description
column_defs [{title, column}] A list of column definitions specifying your column header and row fomatting functions
data List[A] A list of data to be displayed in the table
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag

Notebook

Notebooks are used for creating tabbed layouts. The Notebook is that parent container that holds all the tabs in the UI. You add pages by specifying NotebookItems as children.

Example:

from rewx import wsx
from rewx.components import Notebook, NotebookItem, StaticText

def example(props):
    return wsx(
      [Notebook, {'on_change': props['handle_selection']},
       [NotebookItem, {'title': 'Page 1', 'selected': props['activeSelection'] == 0},
        [StaticText, {'label': "Hello!"}]],
       [NotebookItem, {'title': 'Page 2!!!', 'selected': props['activeSelection'] == 1},
        [StaticText, {'label': "Hello!"}]]]
    )

Availble Props:

key Type Description
on_change Callable[[CommandEvent], None] A command event containing the selected index
style int The style of the Notebook
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag

NotebookItem

NotebookItems are just opaque containers that hold any component you supply. They can only be used with Notebook and must be direct children. This let's rewx register all of your components as pages in the Notebook behind the scenes.

Example:

from rewx import wsx
from rewx.components import Notebook, NotebookItem, StaticText

def example(props):
    return wsx(
      [Notebook, {'on_change': props['handle_selection']},
       [NotebookItem, {'title': 'Page 1', 'selected': props['activeSelection'] == 0},
        [StaticText, {'label': "Hello!"}]],
       [NotebookItem, {'title': 'Page 2!!!', 'selected': props['activeSelection'] == 1},
        [StaticText, {'label': "Hello!"}]]]
    )

Availble Props:

key Type Description
selected bool A boolean controlling whether or not this tab is selected
title str The title of the tab

Panel

A plain WX.Panel. For a version with an attached Sizer, checkout Block.

Panel takes a backseat in re-wx to other types which have baked in Sizers and children management. In re-wx, panel is commonly used just as a spacer element when fine tuning layouts.

Example:

def panel_as_spacer(props):
    return wsx(
      [Block, {'orient': wx.HORIZONTAL},
        # proportion 1 means grow to consume all of the available space
        # because this is in a Horizontal Block, it'll have the effect
        # of right aligning our button
        [Panel, {'proportion': 1}]
        [Button, {'label': 'A am right aligned thanks to the Panel'}]]
    )
key Type Description
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
style any style is context dependent
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

RadioBox

Usage note: Because of how manages RadioBox, its items can not be modified after creation. So, changing choices will unfortunately have no effect. If you need the choices to be dynamically modifiable, checkout RadioButton

You must define and handle on_change in order for the component to be controlled and honor your selected prop.

Example:

def example(props):
    return wsx(
      [RadioBox, {
        'selected': 2
        'choices': ['A', 'B', 'C'],
        'on_change': props['handle_change']
        }]
    )
key Type Description
selected int the index of the selected option
choices [str] A list of string to be displayed as options
on_change callable This function is called when the user interacts with the radiobox
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
style any style is context dependent
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag

RadioButton

An individual RadioButton. This should be used over RadioBox when you need fine-grained control over interactions and layout.

Example:

def example(props):
    return wsx(
      [c.StaticBox, {'label': 'My Radio options'},
         [c.Block, {'flag': wx.TOP, 'border': 20},
             [c.RadioButton, {'label': 'A', 'selected': False}],
             [c.RadioButton, {'label': 'B', 'selected': True}],
             [c.RadioButton, {'label': 'C', 'selected': False}],
             [c.RadioButton, {'label': 'D', 'selected': False}]]]
    )
key Type Description
selected int the index of the selected option
on_change callable This function is called when the user interacts with the radiobox
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
style any style is context dependent
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag

ScrolledPanel

A wx.lib.scrolledpanel.ScrolledPanel with a wx.BoxSixer.

The OnChildFocus behavior is disabled.

Example:

wsx([ScrolledPanel, {
        'scroll_x': False,
        'scroll_y': True,
        },
        [StaticText, {'label': 'Hello world!'}]
)
key Type Description
orient int Controls the direction of the sizer. wx.HORIZONTAL or wx.VERTICAL
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
style any style is context dependent
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
scroll_x bool True to allow horizontal scrolling
scroll_y bool True to allow vertical scrolling
rate_x int The horizontal scroll increment
rate_y int The vertical scroll increment
on_size callable Called when the size of the window changes
on_mouse_motion callable Called with wx.MouseEvent when the mouse position changes
on_mouse_wheel callable Called with wx.MouseEvent when the mouse wheel changes
on_scrollwin callable Called when the scroll position changes

Slider

Example:

def example(props):
    return wsx(
      [Slider, {'value': 22,
                'min': 0,
                'max': 100}],
    )
key Type Description
value int Current value/position of the slider
min int Minimum value available in the slider
max int Maximum value available in the slider
on_change callable This function is called when the slider changes position
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
style any style is context dependent
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

SpinCtrl

Example:

def example(props):
    return wsx(
      [SpinCtrl, {'value': 22,
                'min': 0,
                'max': 100}],
    )
key Type Description
value int Current value of the spin control
min int Minimum value of the spin control
max int Maximum value of the spin control
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
style any style is context dependent
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

SpinCtrlDouble

Example:

def example(props):
    return wsx(
      [SpinCtrlDouble, {'value': 22,
                'min': 0,
                'max': 100,
                'digits': 20,
                'increment': 0.02}],
    )
key Type Description
value float Current value of the spin control
min float Minimum value of the spin control
max float Maximum value of the spin control
digits int Sets the maximum precision of the spin control
increment float Sets the increment amount used by the spin control
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
style any style is context dependent
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

StaticBitmap

Display a fixed image.

Example:

def button_example(props):
    return create_element(StaticBitmap, {'uri': 'path/to/your/image.png'})

Availble Props:

key Type Description
uri string filepath to the image you want displayed. re-wx will handle loading it and turning it into a bitmap
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

StaticBox

Wraps its children in a bordered box with a name.

Example:

def example(props):
    return wsx(
      [c.StaticBox, {'label': 'My Radio options'},
         [c.Block, {'flag': wx.TOP, 'border': 20},
             [c.RadioButton, {'label': 'A', 'selected': False}],
             [c.RadioButton, {'label': 'B', 'selected': True}],
             [c.RadioButton, {'label': 'C', 'selected': False}],
             [c.RadioButton, {'label': 'D', 'selected': False}]]]
    )

Availble Props:

key Type Description
label str Text to display at the top of the box
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

StaticLine

Displays a Horizontal or Vertical line.

Usage Note: make sure to set appropriate proportion and flag props to ensure that the line actually grows to fill the space you expect. If you're not seeing any lines when using this control, most of the time it's because your sizer isn't configured appropriately. Protip: Use the wx.Inspect tool!

Example:

def example(props):
    return wsx(
      [c.StaticLine, {'style': wx.LI_HORIZONTAL, 'flag': wx.EXPAND}]
    )

Availble Props:

key Type Description
style str Style flags
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

StaticText

A basic text element. This is the main way to display strings in a WX application.

Example:

def example(props):
    return wsx([StaticText, {'label': 'Hello world!'}])

Availble Props:

key Type Description
Label str The text to be displayed
style int See the WXPython docs for style options
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

TextCtrl

Example:

def example(props):
    return wsx([TextCtrl, {'value': 'Hello world!'}])

Availble Props:

key Type Description
value str The current text value of the control
placeholder string The hint text to display when the control is empty
editable boolean When false makes the control readonly
on_change callable This function will be called when the user enters text
style int See the WXPython docs for style options
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

TextArea

This is an alias for TextCtrl, but with its style prop pre-baked with wx.TE_MULTILINE.

Example:

def example(props):
    return wsx([TextArea, {'value': 'Hello world!'}])

Availble Props:

key Type Description
value str The current text value of the control
placeholder string The hint text to display when the control is empty
editable boolean When false makes the control readonly
on_change callable This function will be called when the user enters text
style int See the WXPython docs for style options
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.

ToggleButton

Your basic button.

Example:

def button_example(props):
    return create_element(Button, {'label': 'Click me!', 'on_click': props['handler']})

Availble Props:

key Type Description
label string The label displayed on the button
background_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
foreground_color rgb value Either an rgb tuple (e.g. (255, 255, 255) or a hex string (e.g. "#ff00ff")
font wx.Font Sets the Font used by this component and all of its children
name str Adds the supplied name to the generated wx instance. This'll show in wx.Inspector and makes debugging much easier
min_size (int, int) A tuple of (min_width, min_height). Use -1 to let WX auto-size the component.
max_size (int, int) A tuple of (max_width, max_height). Use -1 to let WX auto-size the component.
tooltip str Displays a string when the user hovers over the component
show boolean Toggle whether this item is visible or not.
enabled boolean Enables/Disables the component.
style any style is context dependent
proportion int This parameter controls how much space this element will take up along the main axis of its parent sizer. 0 means don't grow at all, values > 0 cause it to scale proportionally relative to items with the same parent. See the wx.Sizer docs for more info
flag int An ORd combination of flags which control the Sizer's behavior (e.g. {'flag': wx.LEFT | wx.RIGHT})
border int Sets the amount of border/padding which should be applied to the options specified in flag
on_click callable Calls the supplied function when this element is click.