You are currently viewing the new Anvil Editor Docs.
Switch to the Classic Editor Docs
You are currently viewing the Classic Editor Docs.
Switch to the new Anvil Editor Docs

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.


                                  Create a new ‘DropdownMenu’ object


                                  Base class: anvil.Component
                                  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=])

                                    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.


                                          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.


                                          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.


                                                                  Create a new ‘Link’ object


                                                                  Base class: anvil.Component
                                                                  Link([text=], [align=], [italic=], [bold=], [underline=], [font_family=], [font_size=], [material_icon=], [visible=], [text_color=], [icon_color=], [border=], [margin=], [tooltip=], [role=], [url=], [icon_size=])

                                                                    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.


                                                                          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.


                                                                          click()

                                                                          When the Link is clicked.

                                                                          show()

                                                                          When the Link is shown on the screen.

                                                                          hide()

                                                                          When the Link is removed from the screen.


                                                                          Create a new ‘MenuItem’ object


                                                                          Base class: anvil.Component
                                                                          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=])

                                                                            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.


                                                                                  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.


                                                                                  click()

                                                                                  When the component is clicked.


                                                                                  Create a new ‘NavigationDrawerLayout’ object


                                                                                  Base class: anvil.Component
                                                                                  NavigationDrawerLayout([navigation_drawer_color=], [background_color=], [text_color=], [show_sidesheet=])

                                                                                    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.


                                                                                          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.


                                                                                          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.


                                                                                          Create a new ‘NavigationLink’ object


                                                                                          Base class: anvil.Component
                                                                                          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=])

                                                                                            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.


                                                                                                  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.


                                                                                                  click()

                                                                                                  When the NavigationLink is clicked.

                                                                                                  show()

                                                                                                  When the NavigationLink is shown on the screen.

                                                                                                  hide()

                                                                                                  When the NavigationLink is removed from the screen.


                                                                                                  Create a new ‘NavigationRailLayout’ object


                                                                                                  Base class: anvil.Component
                                                                                                  NavigationRailLayout([navigation_rail_color=], [background_color=], [text_color=], [navigation_rail_collapse_to=], [navigation_rail_vertical_align=], [show_sidesheet=])

                                                                                                    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.


                                                                                                          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.


                                                                                                          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.


                                                                                                                                                                  material_3