material_3
Module
Classes
Button
(more info)
Create a new ‘Button’ object
Base class: anvil.Component
Constructor
Button([align=], [appearance=], [visible=], [enabled=], [role=], [text_color=], [font_family=], [icon=], [text=], [font_size=], [underline=], [italic=], [bold=], [icon_color=], [icon_size=], [background_color=], [margin=], [border=], [tooltip=], [icon_position=])
Button Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
Button Properties
align
- enum: "left"
, "right"
, "center"
The position of this component in the available space.
appearance
- enum: "filled"
, "elevated"
, "tonal"
, "outlined"
, "text"
A predefined style for this component.
background_color - color
The colour of the background of this component.
bold - boolean
If True, this component’s text will be bold.
border - string
The border of this component. Can take any valid CSS border value.
enabled - boolean
If True, this component allows user interaction.
font_family - string
The font family to use for this component.
font_size - number
The font size of the text displayed on this component.
icon - enum:
The icon to display on this component.
icon_color - color
The colour of the icon displayed on this component.
icon_position
- enum: "left"
, "right"
The alignment of the icon on this component.
icon_size - number
The size (pixels) of the icon displayed on this component.
italic - boolean
If True, this component’s text will be italic.
margin - margin
The margin (pixels) of the component.
parent
role - themeRole
A style for this component defined in CSS and added to Roles
text - string
The text displayed on this component
text_color - color
The colour of the text on the component.
tooltip - string
The text to display when the mouse is hovered over this component.
underline - boolean
If True, this component’s text will be underlined.
visible - boolean
If True, the component will be displayed.
Button Events
click()
When the component is clicked.
ButtonMenu
(more info)
Create a new ‘ButtonMenu’ object
Base class: anvil.Component
Constructor
ButtonMenu([align=], [appearance=], [visible=], [enabled=], [role=], [button_text_color=], [button_font_family=], [icon=], [text=], [button_font_size=], [underline=], [italic=], [bold=], [icon_color=], [menu_background_color=], [menu_border=], [icon_size=], [button_background_color=], [margin=], [button_border=], [tooltip=], [icon_position=], [menu_items=])
ButtonMenu Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
ButtonMenu Properties
align
- enum: "left"
, "right"
, "center"
The position of this component in the available space.
appearance
- enum: "filled"
, "elevated"
, "tonal"
, "outlined"
, "text"
A predefined style for the Button.
bold - boolean
If True, the Button’s text will be bold.
button_background_color - color
The colour of the background of the Button.
button_border - string
The border of the Button. Can take any valid CSS border value.
button_font_family - string
The font family to use for the Button
button_font_size - number
The font size of the text displayed on the Button.
button_text_color - color
The colour of the text on the Button.
enabled - boolean
If True, this component allows user interaction.
icon - enum:
The icon to display on the Button.
icon_color - color
The colour of the icon displayed on the Button.
icon_position
- enum: "left"
, "right"
The alignment of the icon on this component.
icon_size - number
The size (pixels) of the icon displayed on this component.
italic - boolean
If True, the Button’s text will be italic.
margin - margin
The margin (pixels) of the component.
menu_background_color - color
The colour of the menu.
menu_border - color
The border of the menu. Can take any valid CSS border value.
menu_items - object
A list of components to be added to the menu.
parent
role - themeRole
A style for this component defined in CSS and added to Roles
text - string
The text displayed on the Button
tooltip - string
The text to display when the mouse is hovered over this component.
underline - boolean
If True, the Button’s text will be underlined.
visible - boolean
If True, the component will be displayed.
ButtonMenu Events
click()
When the Button is clicked.
Checkbox
(more info)
Create a new ‘Checkbox’ object
Base class: anvil.Component
Constructor
Checkbox([enabled=], [visible=], [underline=], [italic=], [bold=], [font_size=], [border=], [font_family=], [text_color=], [background=], [align=], [margin=], [tooltip=], [role=], [text=], [checkbox_color=], [checked=], [allow_indeterminate=], [error=])
Checkbox Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
focus()
Set the keyboard focus to this Checkbox.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
Checkbox Properties
align - enum:
The position of this component in the available space.
allow_indeterminate - boolean
If True, supports an indeterminate state. The indeterminate state can only be set in code by setting checked=None.
background - color
The color of the background of this component.
bold - boolean
If True, this component’s text will be bold.
border - string
The border of this component. Can take any valid CSS border value.
checkbox_color - color
The color of the checkbox.
checked - boolean
If True, the checkbox is checked.
enabled - boolean
If True, this component allows user interaction.
error - boolean
If True, the checkbox is in an error state.
font_family - string
The font family to use for this component.
font_size - number
The font size of text displayed on this component.
italic - boolean
If True, this component’s text will be italic.
margin - margin
The margin (pixels) of the component.
parent
role - themeRole
A style for this component defined in CSS and added to Roles
text - string
The text displayed on this component
text_color - color
The color of the text on the component.
tooltip - string
The text to display when the mouse is hovered over this component.
underline - boolean
If True, this component’s text will be underlined.
visible - boolean
If True, the component will be displayed.
Checkbox Events
change()
When the Checkbox is checked or unchecked.
show()
When the Checkbox is shown on the screen.
hide()
When the Checkbox is removed from the screen.
Divider
(more info)
Create a new ‘Divider’ object
Base class: anvil.Component
Constructor
Divider([type=], [visible=], [color=], [margin=], [role=])
Divider Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
Divider Properties
color - color
The colour of this component.
margin - margin
The margin (pixels) of the component.
parent
role - themeRole
A style for this component defined in CSS and added to Roles.
type
- enum: "full_width"
, "inset"
Display the Divider across the full width of the container or inset.
visible - boolean
If True, the component will be displayed.
Divider Events
show()
When the Divider is shown on the screen.
hide()
When the Divider is removed from the screen.
DropdownMenu
(more info)
Create a new ‘DropdownMenu’ object
Base class: anvil.Component
Constructor
DropdownMenu([align=], [appearance=], [visible=], [enabled=], [error=], [role=], [label_text_color=], [label_text=], [label_font_family=], [label_font_size=], [label_underline=], [label_italic=], [label_bold=], [items_text_color=], [items_font_family=], [items_font_size=], [items_underline=], [items_italic=], [items_bold=], [menu_background_color=], [selected_text_color=], [selected_font_size=], [selected_font_family=], [selected_underline=], [selected_italic=], [selected_bold=], [leading_icon=], [leading_icon_color=], [supporting_text=], [supporting_text_color=], [supporting_text_font_family=], [supporting_text_font_size=], [background_color=], [placeholder=], [allow_none=], [margin=], [tooltip=], [items=], [selected_value=], [border_color=])
DropdownMenu Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
DropdownMenu Properties
align
- enum: "left"
, "right"
, "center"
The position of this component in the available space.
allow_none - boolean
If True, a placeholder item is added to the menu with value None
appearance
- enum: "filled"
, "outlined"
A predefined style for this component.
background_color - color
The colour of the background of this component.
border_color - color
The colour of the border of this component.
enabled - boolean
If True, this component allows user interaction.
error - boolean
If True, this component is in an error state.
items - string list
The items to display in the menu.
items_bold - boolean
If True, the menu items will be bold.
items_font_family - string
The font family to use for the menu items.
items_font_size - number
The font size of the menu items.
items_italic - boolean
If True, the menu items will be italic.
items_text_color - color
The colour of the menu items’ text.
items_underline - boolean
If True, the menu items will be underlined.
label_bold - boolean
If True, the label text will be bold.
label_font_family - string
The font family to use for the label this component.
label_font_size - number
The font size of the label text on this component.
label_italic - boolean
If True, the label text will be italic.
label_text - string
The label text of the component.
label_text_color - color
The colour of the label text on the component.
label_underline - boolean
If True, the label text will be underlined.
leading_icon - enum:
The leading icon to display on this component.
leading_icon_color - color
The colour of the leading icon displayed on this component.
margin - margin
The margin (pixels) of the component.
menu_background_color - color
The background color of the menu.
parent
placeholder - string
The text to be displayed when the component is empty
role - themeRole
A style for this component defined in CSS and added to Roles
selected_bold - boolean
If True and there is a selected item, the displayed text is bold.
selected_font_family - string
The font-family of the displayed text if there is a selected item.
selected_font_size - number
The font size (pixels) of the displayed text if there is a selected item.
selected_italic - boolean
If True and there is a selected item, the displayed text in italic.
selected_text_color - color
The colour of the displayed text if there is a selected item.
selected_underline - boolean
If True and there is a selected item, the displayed text is underlined
selected_value - object
The value of the currently selected item. Can only be set at runtime.
supporting_text - string
The supporting text displayed below this component
supporting_text_color - color
The colour of the supporting text below this component.
supporting_text_font_family - color
The font family to use for the supporting text below this component.
supporting_text_font_size - color
The font size of the supporting text displayed below this component.
tooltip - string
The text to display when the mouse is hovered over this component.
visible - boolean
If True, the component will be displayed.
DropdownMenu Events
change()
When an item is selected.
FileLoader
(more info)
Create a new ‘FileLoader’ object
Base class: anvil.Component
Constructor
FileLoader([text=], [visible=], [enabled=], [text_color=], [icon_color=], [background_color=], [underline=], [italic=], [bold=], [font_family=], [icon_size=], [font_size=], [align=], [border=], [margin=], [tooltip=], [role=], [appearance=], [show_state=], [material_icon=], [file_types=], [multiple=], [file=])
FileLoader Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
clear()
Clear any selected files from this FileLoader.
focus()
Set the keyboard focus to this FileLoader.
open_file_selector()
Open the file selector from code, this should be called within a click event handler for another component.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
FileLoader Properties
align
- enum: "left"
, "center"
, "right"
The position of this component in the available space.
appearance
- enum: "text"
, "filled"
, "elevated"
, "tonal"
, "outlined"
A predefined style for this component.
background_color - color
The color of the background of this component.
bold - boolean
If True, this component’s text will be bold.
border - string
The border of this component. Can take any valid CSS border value.
enabled - boolean
If True, this component allows user interaction.
file - object
The currently selected file (or the first, if multiple files are selected). This is a Media object.
file_types - string
Specify what type of file to upload. Can accept a MIME type (eg ‘image/png’ or ‘image/*’), an extension (eg ‘.png’), or a comma-separated set of them (eg ‘.png,.jpg,.jpeg’).
font_family - string
The font family to use for this component.
font_size - number
The font size of text displayed on this component.
icon_color - color
The color of the icon displayed on this component.
icon_size - number
The size (pixels) of the icon displayed on this component.
italic - boolean
If True, this component’s text will be italic.
margin - margin
The margin (pixels) of the component.
material_icon - enum:
The icon to display on this component.
multiple - boolean
If True, this FileLoader can load multiple files at the same time.
parent
role - themeRole
A style for this component defined in CSS and added to Roles.
show_state - boolean
If True, display a message indicating the number of selected files.
text - string
The text displayed on this component
text_color - color
The color of the text on the component.
tooltip - string
The text to display when the mouse is hovered over this component.
underline - boolean
If True, this component’s text will be underlined.
visible - boolean
If True, the component will be displayed.
FileLoader Events
change(file, files)
When a new file is loaded into this FileLoader.
file
- The first selected file. Set the 'multiple' property to allow loading more than one file.files
- A list of loaded files. Set the 'multiple' property to allow loading more than one file.
show()
When the FileLoader is shown on the screen.
hide()
When the FileLoader is removed from the screen.
focus()
When the FileLoader gets focus.
lost_focus()
When the FileLoader loses focus.
Heading
(more info)
Create a new ‘Heading’ object
Base class: anvil.Component
Constructor
Heading([visible=], [italic=], [border=], [font_family=], [text_color=], [icon_color=], [background_color=], [tooltip=], [role=], [align=], [font_size=], [icon_size=], [underline=], [bold=], [text=], [material_icon=], [style=], [scale=], [margin=])
Heading Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
Heading Properties
align
- enum: "left"
, "right"
, "center"
, "justify"
The position of this component in the available space.
background_color - color
The color of the background of this component.
bold - boolean
If True, this component’s text will be bold.
border - string
The border of this component. Can take any valid CSS border value.
font_family - string
The font family to use for this component.
font_size - number
The font size of text displayed on this component.
icon_color - color
The color of the icon displayed on this component.
icon_size - number
The size (pixels) of the icon displayed on this component.
italic - boolean
If True, this component’s text will be italic.
margin - margin
The margin (pixels) of the component.
material_icon - enum:
The icon to display on this component.
parent
role - themeRole
A style for this component defined in CSS and added to Roles
scale
- enum: "small"
, "medium"
, "large"
The size of the heading component.
style
- enum: "display"
, "headline"
, "title"
Role of the heading component: display, headline or title.
text - string
The text displayed on this component
text_color - color
The color of the text on the component.
tooltip - string
The text to display when the mouse is hovered over this component.
underline - boolean
If True, this component’s text will be underlined.
visible - boolean
If True, the component will be displayed.
Heading Events
show()
When the Heading is shown on the screen.
hide()
When the Heading is removed from the screen.
IconButton
(more info)
Create a new ‘IconButton’ object
Base class: anvil.Component
Constructor
IconButton([align=], [appearance=], [visible=], [enabled=], [role=], [icon=], [icon_color=], [background=], [margin=], [border=], [tooltip=])
IconButton Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
IconButton Properties
align - enum:
The position of this component in the available space.
appearance
- enum: "standard"
, "filled"
, "tonal"
, "outlined"
A predefined style for this component.
background - color
The colour of the background of this component.
border - string
The border of this component. Can take any valid CSS border value.
enabled - boolean
If True, this component allows user interaction.
icon - enum:
The icon to display on this component.
icon_color - color
The colour of the icon displayed on this component.
margin - margin
The margin (pixels) of the component.
parent
role - themeRole
A style for this component defined in CSS and added to Roles
tooltip - string
The text to display when the mouse is hovered over this component.
visible - boolean
If True, the component will be displayed.
IconButton Events
click()
When the component is clicked.
Link
(more info)
Create a new ‘Link’ object
Base class: anvil.Component
Constructor
Link([text=], [align=], [italic=], [bold=], [underline=], [font_family=], [font_size=], [material_icon=], [visible=], [text_color=], [icon_color=], [border=], [margin=], [tooltip=], [role=], [url=], [icon_size=])
Link Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
Link Properties
align
- enum: "left"
, "center"
, "right"
The position of this component in the available space.
bold - boolean
If True, this component’s text will be bold.
border - string
The border of this component. Can take any valid CSS border value.
font_family - string
The font family to use for this component.
font_size - number
The font size of text displayed on this component.
icon_color - color
The color of the icon displayed on this component.
icon_size - number
The size (pixels) of the icon displayed on this component.
italic - boolean
If True, this component’s text will be italic.
margin - margin
The margin (pixels) of the component.
material_icon - enum:
The icon to display on this component.
parent
role - themeRole
A style for this component defined in CSS and added to Roles.
text - string
The text displayed on this component.
text_color - color
The color of the text on the component.
tooltip - string
The text to display when the mouse is hovered over this component.
underline - boolean
If True, this component’s text will be underlined.
url - string
TThe target URL of the link. Can be set to a URL string or to a Media object.
visible - boolean
If True, the component will be displayed.
Link Events
click()
When the Link is clicked.
show()
When the Link is shown on the screen.
hide()
When the Link is removed from the screen.
MenuItem
(more info)
Create a new ‘MenuItem’ object
Base class: anvil.Component
Constructor
MenuItem([visible=], [enabled=], [role=], [text_color=], [font_family=], [leading_icon=], [trailing_icon=], [text=], [font_size=], [underline=], [italic=], [bold=], [leading_icon_color=], [trailing_icon_color=], [background_color=], [icon_size=], [button_background_color=], [margin=])
MenuItem Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
MenuItem Properties
background_color - color
The colour of the menu.
bold - boolean
If True, the Button’s text will be bold.
button_background_color - color
The colour of the background of the Button.
enabled - boolean
If True, this component allows user interaction.
font_family - string
The font family to use for this component.
font_size - number
The font size of the text displayed on this component.
icon_size - number
The size (pixels) of the icon displayed on this component.
italic - boolean
If True, the Button’s text will be italic.
leading_icon - enum:
The icon to display on this component.
leading_icon_color - color
The colour of the icon displayed on the Button.
margin - margin
The margin (pixels) of the component.
parent
role - themeRole
A style for this component defined in CSS and added to Roles
text - string
The text displayed on this component.
text_color - color
The colour of the text on this component.
trailing_icon - enum:
The icon to display on this component.
trailing_icon_color - color
The colour of the icon displayed on the Button.
underline - boolean
If True, the Button’s text will be underlined.
visible - boolean
If True, the component will be displayed.
MenuItem Events
click()
When the component is clicked.
NavigationDrawerLayout
(more info)
Create a new ‘NavigationDrawerLayout’ object
Base class: anvil.Component
Constructor
NavigationDrawerLayout([navigation_drawer_color=], [background_color=], [text_color=], [show_sidesheet=])
NavigationDrawerLayout Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
hide_nav_drawer()
Hide the navigation drawer.
open_nav_drawer()
Open the navigation drawer.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
NavigationDrawerLayout Properties
background_color - color
The background color of Forms using this Layout.
navigation_drawer_color - color
The color of the navigation drawer on Forms using this Layout.
parent
show_sidesheet - boolean
If True, the sidesheet will be shown on Forms using this Layout.
text_color - color
The default color of the text on Forms using this Layout.
NavigationDrawerLayout Events
show()
When the Form is shown on the screen.
hide()
When the Form is removed from the screen.
refreshing_data_bindings()
When refresh_data_bindings is called.
NavigationLink
(more info)
Create a new ‘NavigationLink’ object
Base class: anvil.Component
Constructor
NavigationLink([visible=], [text=], [role=], [italic=], [bold=], [underline=], [text_color=], [icon_color=], [font_family=], [font_size=], [icon_size=], [tooltip=], [margin=], [url=], [material_icon=], [selected=], [badge=], [badge_count=], [navigate_to=])
NavigationLink Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
NavigationLink Properties
badge - boolean
If True, display a notification badge on the icon.
badge_count - number
The number to display on the badge.
bold - boolean
If True, this component’s text will be bold.
font_family - string
The font family to use for this component.
font_size - number
The font size of text displayed on this component.
icon_color - color
The color of the icon displayed on this component.
icon_size - number
The size (pixels) of the icon displayed on this component.
italic - boolean
If True, this component’s text will be italic.
margin - margin
The margin (pixels) of the component.
material_icon - enum:
The icon to display on this component.
navigate_to - form
The Form to navigate to when the link is clicked.
parent
role - themeRole
A style for this component defined in CSS and added to Roles.
selected - boolean
If True, the component is in the selected state.
text - string
The text displayed on this component.
text_color - color
The color of the text on the component.
tooltip - string
The text to display when the mouse is hovered over this component.
underline - boolean
If True, this component’s text will be underlined.
url - string
TThe target URL of the link. Can be set to a URL string or to a Media object.
visible - boolean
If True, the component will be displayed.
NavigationLink Events
click()
When the NavigationLink is clicked.
show()
When the NavigationLink is shown on the screen.
hide()
When the NavigationLink is removed from the screen.
NavigationRailLayout
(more info)
Create a new ‘NavigationRailLayout’ object
Base class: anvil.Component
Constructor
NavigationRailLayout([navigation_rail_color=], [background_color=], [text_color=], [navigation_rail_collapse_to=], [navigation_rail_vertical_align=], [show_sidesheet=])
NavigationRailLayout Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
hide_nav_drawer()
Hide the navigation drawer.
open_nav_drawer()
Open the navigation drawer.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
NavigationRailLayout Properties
background_color - color
The background color of Forms using this Layout.
navigation_rail_collapse_to
- enum: "bottom_app_bar"
, "modal_navigation_drawer"
The way the side navigation will collapse on mobile.
navigation_rail_color - color
The color of the navigation rail on Forms using this Layout.
navigation_rail_vertical_align
- enum: "top"
, "center"
, "bottom"
The vertical position of the content in the navigation rail.
parent
show_sidesheet - boolean
If True, the sidesheet will be shown on Forms using this Layout.
text_color - color
The default color of the text on Forms using this Layout.
NavigationRailLayout Events
show()
When the Form is shown on the screen.
hide()
When the Form is removed from the screen.
refreshing_data_bindings()
When refresh_data_bindings is called.
RadioButton
(more info)
Create a new ‘RadioButton’ object
Base class: anvil.Component
Constructor
RadioButton([enabled=], [visible=], [underline=], [italic=], [bold=], [font_size=], [border=], [font_family=], [text_color=], [background=], [align=], [margin=], [tooltip=], [role=], [text=], [radio_color=], [selected=])
RadioButton Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
get_group_value() → str
Returns the value of the button in the group which is pressed.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
RadioButton Properties
align - enum:
The position of this component in the available space.
background - color
The color of the background of this component.
bold - boolean
If True, this component’s text will be bold.
border - string
The border of this component. Can take any valid CSS border value.
enabled - boolean
If True, this component allows user interaction.
font_family - string
The font family to use for this component.
font_size - number
The font size of text displayed on this component.
italic - boolean
If True, this component’s text will be italic.
margin - margin
The margin (pixels) of the component.
parent
radio_color - color
The color of the radio button.
role - themeRole
A style for this component defined in CSS and added to Roles
selected - boolean
If True, the radio button is selected.
text - string
The text displayed on this component
text_color - color
The color of the text on the component.
tooltip - string
The text to display when the mouse is hovered over this component.
underline - boolean
If True, this component’s text will be underlined.
visible - boolean
If True, the component will be displayed.
RadioButton Events
change()
When the Radio Button is selected or unselected.
show()
When the Radio Button is shown on the screen.
hide()
When the Raio Button is removed from the screen.
Slider
(more info)
Create a new ‘Slider’ object
Base class: anvil.Component
Constructor
Slider([show_label=], [progress_color=], [visible=], [enabled=], [role=], [thumb_color=], [label_color=], [label_text_color=], [value=], [min=], [max=], [step=], [show_markers=], [margin=], [track_color=], [tooltip=])
Slider Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
Slider Properties
enabled - boolean
If True, this component allows user interaction.
label_color - color
The colour of the background of the label
label_text_color - color
The colour of the text of the label
margin - margin
The margin (pixels) of the component.
max - number
The maximum value of the Slider.
min - number
The minimum value of the Slider.
parent
progress_color - color
The colour of the progress bar
role - themeRole
A style for this component defined in CSS and added to Roles
show_label - boolean
If True, display a label above the thumb with the current value.
show_markers - boolean
If True, display discrete markers on the track.
step - number
The stepping interval for the Slider.
thumb_color - color
The colour of the slider thumb.
tooltip - string
The text to display when the mouse is hovered over this component.
track_color - color
The colour of the slider track.
value - number
The value of the slider.
visible - boolean
If True, the component will be displayed.
Slider Events
change()
When the value of the component is changed
Switch
(more info)
Create a new ‘Switch’ object
Base class: anvil.Component
Constructor
Switch([enabled=], [align=], [visible=], [margin=], [tooltip=], [role=], [selected_background_color=], [unselected_background_color=], [selected_thumb_color=], [unselected_thumb_color=], [unselected_outline_color=], [selected_icon=], [unselected_icon=], [selected=])
Switch Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
Switch Properties
align
- enum: "left"
, "center"
, "right"
The position of this component in the available space.
enabled - boolean
If True, this component allows user interaction.
margin - margin
The margin (pixels) of the component.
parent
role - themeRole
A style for this component defined in CSS and added to Roles.
selected - boolean
If True, this component is toggled on.
selected_background_color - color
The background colour of the component when toggled on.
selected_icon - enum:
Optional icon to appear on the Switch when toggled on.
selected_thumb_color - color
The colour of the Switch thumb when toggled on.
tooltip - string
The text to display when the mouse is hovered over this component.
unselected_background_color - color
The background colour of the component when toggled off.
unselected_icon - enum:
Optional icon to appear on the Switch when toggled off.
unselected_outline_color - color
The colour of the outline of the Switch when toggled off.
unselected_thumb_color - color
The colour of the Switch thumb when toggled off.
visible - boolean
If True, the component will be displayed.
Switch Events
change()
When the state of the Switch is changed.
show()
When the Switch is shown on the screen.
hide()
When the Switch is removed from the screen.
Text
(more info)
Create a new ‘Text’ object
Base class: anvil.Component
Constructor
Text([visible=], [underline=], [italic=], [bold=], [border=], [font_family=], [text_color=], [icon_color=], [background_color=], [text=], [icon_size=], [margin=], [tooltip=], [role=], [align=], [font_size=], [material_icon=], [style=], [scale=])
Text Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
Text Properties
align
- enum: "left"
, "right"
, "center"
, "justify"
The position of this component in the available space.
background_color - color
The color of the background of this component.
bold - boolean
If True, this component’s text will be bold.
border - string
The border of this component. Can take any valid CSS border value.
font_family - string
The font family to use for this component.
font_size - number
The font size of text displayed on this component.
icon_color - color
The color of the icon displayed on this component.
icon_size - number
The size (pixels) of the icon displayed on this component.
italic - boolean
If True, this component’s text will be italic.
margin - margin
The margin (pixels) of the component.
material_icon - enum:
The icon to display on this component.
parent
role - themeRole
A style for this component defined in CSS and added to Roles
scale
- enum: "small"
, "medium"
, "large"
The size of the text component.
style
- enum: "display"
, "headline"
, "title"
Role of the text component: display, headline or title.
text - string
The text displayed on this component
text_color - color
The color of the text on the component.
tooltip - string
The text to display when the mouse is hovered over this component.
underline - boolean
If True, this component’s text will be underlined.
visible - boolean
If True, the component will be displayed.
Text Events
show()
When the Text is shown on the screen.
hide()
When the Text is removed from the screen.
TextArea
(more info)
Create a new ‘TextArea’ object
Base class: anvil.Component
Constructor
TextArea([align=], [appearance=], [visible=], [enabled=], [error=], [role=], [label_text_color=], [label_text=], [label_font_family=], [label_font_size=], [label_underline=], [label_italic=], [bold_label=], [input_text_color=], [display_font_family=], [display_font_size=], [display_underline=], [display_italic=], [display_bold=], [supporting_text=], [supporting_text_color=], [supporting_text_font_family=], [supporting_text_font_size=], [character_limit=], [character_limit_color=], [character_limit_font_family=], [character_limit_font_size=], [background_color=], [border_color=], [placeholder=], [spacing=], [tooltip=], [input_text=])
TextArea Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
focus()
Set the keyboard focus to this TextArea.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
select()
Set the input text on this TextArea.
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
TextArea Properties
align
- enum: "left"
, "right"
, "center"
The position of this component in the available space.
appearance
- enum: "filled"
, "outlined"
A predefined style for this component.
background_color - color
The colour of the background of this component.
bold_label - boolean
If True, the label text will be bold.
border_color - color
The colour of the border of this component.
character_limit - number
The max number of characters a user can enter into this component. The limit is displayed below the component.
character_limit_color - color
The colour of the character limit text displayed underneath this component.
character_limit_font_family - number
The font family of the character limit text displayed underneath this component.
character_limit_font_size - number
The font size of the character limit text displayed underneath this component.
display_bold - boolean
If True, the input and placeholder text will be bold.
display_font_family - string
The font family to use for the input and placeholder text.
display_font_size - number
The font size of the input and placeholder text.
display_italic - boolean
If True, the input and placeholder text will be italic.
display_underline - boolean
The font family to use for the label on this component.
enabled - boolean
If True, this component allows user interaction.
error - boolean
If True, this component is in an error state.
input_text - string
The input text to display on this component
input_text_color - color
The colour of the input text displayed on this component.
label_font_family - string
The font family to use for the label on this component.
label_font_size - number
The font size of the label text on this component.
label_italic - boolean
If True, the label text will be italic.
label_text - string
The label text of the component.
label_text_color - color
The colour of the label text on the component.
label_underline - boolean
If True, the label text will be underlined.
parent
placeholder - string
The text to be displayed when the component is empty
role - themeRole
A style for this component defined in CSS and added to Roles
spacing - spacing
The margin and padding of this component. Default value is in pixels.
supporting_text - string
The supporting text displayed underneath this component
supporting_text_color - color
The colour of the supporting text underneath this component.
supporting_text_font_family - color
The font family to use for the supporting text underneath this component.
supporting_text_font_size - color
The font size of the supporting text displayed underneath this component.
tooltip - string
The text to display when the mouse is hovered over this component.
visible - boolean
If True, the component will be displayed.
TextArea Events
change()
When the text in this component is edited.
focus()
When the component gets focus.
lost_focus()
When the component loses focus.
change()
When the text in this component is edited.
focus()
When the component gets focus.
lost_focus()
When the component loses focus.
TextField
(more info)
Create a new ‘TextField’ object
Base class: anvil.Component
Constructor
TextField([align=], [appearance=], [visible=], [enabled=], [error=], [role=], [label_text_color=], [label_text=], [label_font_family=], [label_font_size=], [label_underline=], [label_italic=], [label_bold=], [input_text_color=], [display_font_family=], [display_font_size=], [display_underline=], [display_italic=], [display_bold=], [leading_icon=], [trailing_icon=], [leading_icon_color=], [trailing_icon_color=], [supporting_text=], [supporting_text_color=], [supporting_text_font_family=], [supporting_text_font_size=], [character_limit=], [character_limit_color=], [character_limit_font_family=], [character_limit_font_size=], [background_color=], [border_color=], [placeholder=], [spacing=], [type=], [tooltip=], [input_text=], [hide_text=])
TextField Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
focus()
Set the keyboard focus to this TextField.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
select()
Set the input text on this TextField.
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
TextField Properties
align
- enum: "left"
, "right"
, "center"
The position of this component in the available space.
appearance
- enum: "filled"
, "outlined"
A predefined style for this component.
background_color - color
The colour of the background of this component.
border_color - color
The colour of the border of this component.
character_limit - number
The max number of characters a user can enter into this component. The limit is displayed below the component.
character_limit_color - color
The colour of the character limit text displayed below this component.
character_limit_font_family - number
The font family of the character limit text displayed below this component.
character_limit_font_size - number
The font size of the character limit text displayed below this component.
display_bold - boolean
If True, the input and placeholder text will be bold.
display_font_family - string
The font family to use for the input and placeholder text.
display_font_size - number
The font size of the input and placeholder text.
display_italic - boolean
If True, the input and placeholder text will be italic.
display_underline - boolean
If True, the input and placeholder text will be underlined.
enabled - boolean
If True, this component allows user interaction.
error - boolean
If True, this component is in an error state.
hide_text - boolean
If True, display stars instead of text when the user types input into this component.
input_text - string
The input text to display on this component
input_text_color - color
The colour of the input text displayed on this component.
label_bold - boolean
If True, the label text will be bold.
label_font_family - string
The font family to use for the label this component.
label_font_size - number
The font size of the label text on this component.
label_italic - boolean
If True, the label text will be italic.
label_text - string
The label text of the component.
label_text_color - color
The colour of the label text on the component.
label_underline - boolean
If True, the label text will be underlined.
leading_icon - enum:
The leading icon to display on this component.
leading_icon_color - color
The colour of the leading icon displayed on this component.
parent
placeholder - string
The text to be displayed when the component is empty
role - themeRole
A style for this component defined in CSS and added to Roles
spacing - spacing
The margin and padding (pixels) of the component.
supporting_text - string
The supporting text displayed below this component
supporting_text_color - color
The colour of the supporting text below this component.
supporting_text_font_family - color
The font family to use for the supporting text below this component.
supporting_text_font_size - color
The font size of the supporting text displayed below this component.
tooltip - string
The text to display when the mouse is hovered over this component.
trailing_icon - enum:
The trailing icon to display on this component.
trailing_icon_color - color
The colour of the trailing icon displayed on this component.
type
- enum: "text"
, "number"
, "email"
, "tel"
, "url"
The type of data that the user can enter into this box.
visible - boolean
If True, the component will be displayed.
TextField Events
change()
When the text in this component is edited.
focus()
When the component gets focus.
lost_focus()
When the component loses focus.
trailing_icon_click()
When the trailing icon is clicked.
pressed_enter()
When the user presses enter in this component.
ToggleIconButton
(more info)
Create a new ‘ToggleIconButton’ object
Base class: anvil.component
Constructor
ToggleIconButton([align=], [appearance=], [visible=], [enabled=], [role=], [icon=], [icon_color=], [background=], [margin=], [border=], [tooltip=], [selected=], [selected_border=], [selected_background=], [selected_icon_color=])
ToggleIconButton Methods
add_event_handler(event_name, handler_func)
Add an event handler function to be called when the event happens on this component. Event handlers will be called in the order they are added. Adding the same event handler multiple times will mean it gets called multiple times.
remove_event_handler(event_name, [handler_func])
Remove a specific event handler function for a given event. Calling remove_event_handler with just the event name will remove all the handlers for this event
set_event_handler(event_name, handler_func)
Set a function to call when the ’event_name’ event happens on this component. Using set_event_handler removes all other handlers. Setting the handler function to None removes all handlers.
ToggleIconButton Properties
align
- enum: "left"
, "right"
, "center"
The position of this component in the available space.
appearance
- enum: "standard"
, "filled"
, "tonal"
, "outlined"
A predefined style for this component.
background - color
The colour of the background of this component.
border - string
The border of this component. Can take any valid CSS border value.
enabled - boolean
If True, this component allows user interaction.
icon - enum:
The icon to display on this component.
icon_color - color
The colour of the icon displayed on this component.
margin - margin
The margin (pixels) of the component.
parent
role - themeRole
A style for this component defined in CSS and added to Roles
selected - boolean
If True, the component is in the selected state.
selected_background - color
The background colour when the component is in the selected state.
selected_border - string
The border style when the component is in the selected state. Accepts any valid CSS border value.
selected_icon_color - color
The icon colour when the component is in the selected state.
tooltip - string
The text to display when the mouse is hovered over this component.
visible - boolean
If True, the component will be displayed.
ToggleIconButton Events
click()
When the component is clicked.
Do you still have questions?
Our Community Forum is full of helpful information and Anvil experts.