Skip to main content

Message

A banner displays errors, warnings, or important information about an open app or file. For example, if a file failed to upload an error message bar should appear.

Examples​

Live demo

Basic messages​

import pglet
from pglet import Message
with pglet.page("basic-messages") as page:
page.add(
Message(value='This is just a message.'),
Message(value='Success message with dismiss button', dismiss=True, type='success'),
Message(value='Error message with dismiss button', dismiss=True, type='error'))

Truncated message​

import pglet
from pglet import Message
with pglet.page("truncated-message") as page:
page.add(
Message(type='blocked', truncated=True, dismiss=True, value='Blocked Message - single line, with dismiss button and truncated text. Truncation is not available if you use action buttons or multiline and should be used sparingly. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus, purus a lobortis tristique, odio augue pharetra metus, ac placerat nunc mi nec dui. Vestibulum aliquam et nunc semper scelerisque. Curabitur vitae orci nec quam condimentum porttitor et sed lacus. Vivamus ac efficitur leo. Cras faucibus mauris libero, ac placerat erat euismod et. Donec pulvinar commodo odio sit amet faucibus. In hac habitasse platea dictumst. Duis eu ante commodo, condimentum nibh pellentesque, laoreet enim. Fusce massa lorem, ultrices eu mi a, fermentum suscipit magna. Integer porta purus pulvinar, hendrerit felis eget, condimentum mauris. You\'ve been warned!'))

Messages with buttons​

import pglet
from pglet import Message, MessageButton
with pglet.page("myapp") as page:

page.add(
Message(type='warning', dismiss=True, value='Warning message with buttons', buttons=[
MessageButton(text='Yes', action='yes'),
MessageButton(text='No', action='no')
]),
Message(type='severeWarning', multiline=True, value='SevereWarning defaults to multiline. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus, purus a lobortis tristique, odio augue pharetra metus, ac placerat nunc mi nec dui. Vestibulum aliquam et nunc semper scelerisque. Curabitur vitae orci nec quam condimentum porttitor et sed lacus. Vivamus ac efficitur leo. Cras faucibus mauris libero, ac placerat erat euismod et. Donec pulvinar commodo odio sit amet faucibus. In hac habitasse platea dictumst. Duis eu ante commodo, condimentum nibh pellentesque, laoreet enim. Fusce massa lorem, ultrices eu mi a, fermentum suscipit magna. Integer porta purus pulvinar, hendrerit felis eget, condimentum mauris.', buttons=[
MessageButton('OK'),
MessageButton('Cancel')
]))

Message with dismiss event​

import pglet
from pglet import Message, Text
with pglet.page("message-with-dismiss-event") as page:

def message_dismissed(e):
t.value = "Message dismissed!"
page.update()

m = Message(value="Message with 'dismiss' event", dismiss=True, on_dismiss=message_dismissed)
t = Text()

page.add(m, t)
input()

Message with dismiss event and buttons​

import pglet
from pglet import Message, MessageButton, Text
with pglet.page("message-with-dismiss-event-and-buttons") as page:

def message_dismissed(e):
t.value = f"Message dismissed with {e.data} action"
page.update()

m = Message(value="Message with 'dismiss' event and buttons", dismiss=True, on_dismiss=message_dismissed, buttons=[
MessageButton('OK'),
MessageButton('Cancel')
])
t = Text()

page.add(m, t)
input()

Properties​

NameTypeDefaultDescription
valuestringMessage text.
typestringinfoMessage type: info (default), error, blocked, severeWarning, success, warning
multilineboolfalseDetermines if the message bar is multi lined. If false, and the text overflows over buttons or to another line, it is clipped.
truncatedboolfalseDetermines if the message bar text is truncated. If true, a button will render to toggle between a single line view and multiline view. This prop is for single line message bars with no buttons only in a limited space scenario.
dismissboolfalseWhether to display "dismiss" button.
iconstringCustom icon to replace the message bar icon. If unset, default will be the icon set by message type.
iconColorstringMessage icon color.
dismissIconstringCustom icon to replace the dismiss icon. If unset, default will be "Clear" icon.
dismissIconColorstringCustom dismiss icon color.
datastringAdditional data attached to the control. The value is passed in click event data.

Events​

NameDescription
dismissFires when the message is dismissed.

Child controls​

Button control​

Allows adding custom action buttons on the right side or message, e.g. "Yes/No", "Abort/Retry/Ignore".

Properties​

NameTypeDefaultDescription
textstringButton text.
actionstringThe value to pass into dismiss event when the button is clicked. The text value is used if action is not specified.