I created an improved version of the default alerts that Anvil has. It allows lots of customizations and also allows multiple alerts to be displayed in a single screen. You can also resize or drag alert anywhere on the screen.
To use this alert in your app, clone this app and add it as a dependency to your app.
from alert2.alert2 import alert2
Here is a Demo App.
https://anvil.works/build#clone:RK3OZJVOVRHJYOSV=SJBVK43WAKV2NLLT3PHDSKA5
And the clone link of dependency
https://anvil.works/build#clone:BLEE5QRAV7T654ZV=ZENHA3CKXO67MYNNFBK72ZO7
Since we have so many customizations in this alert, here is a detailed list explaining each one
1. content
You can pass any string, anvil component, or form to content property
Ex.
alert2(content='This is the body of my alert')
alert2(content=Image(source='image.png'))
alert2(content=Form1())
Default Value = " "
2. header
You can pass any string, anvil component, or form to the header property. If you set the value of the header to False, it will be removed.
Ex.
alert2(header='This is the Title of my alert')
alert2(header=False) #Will disable Header
Default Value = False
3. footer_buttons
Adds buttons to the footer of alert. Clicking the button will close the alert and set the value of the alert. You can pass a list of string, dictionary, list of anvil components. If you set this value to False, it will disable footer, similar to the case with headers.
Ex.
a1=alert2(footer_buttons=["No","Yes"])
print(a1.value) #Should print either 'Yes' or 'No'
a2=alert2(footer_buttons={'Key':'Value'}) #This will display Button text as 'Key'
print(a2.value) #Should print 'Value'
a3=alert2(footer_buttons=[Button(text='Yes',icon='fa:check'),Button(text='No',icon='fa:times')])
#You can pass any Anvil Component
print(a3.value) #Will display None. However, it will close the alert.
Default Value = False
4. close()
This method will close the current alert.
Ex.
a2=alert2(content='Hello')
a2.close()
5. dismissable
If set to False, the alert can only be closed when clicking any of the footer buttons or by calling the close method.
Ex.
alert2(content='This is the body of my alert')
alert2(content=Image(source='image.png'))
alert2(content=Form1())
Default Value = True
6. role
Assign an Anvil role to your alert.
Ex.
alert2(role='foo')
Default Value = None
7. close_button_color
Set the color of the close button.
Ex.
alert2(close_button_color='red')
Default Value = 'grey
8. block_script
If set to False, the rest of your app will continue running while the alert is opened.
Ex.
alert2(block_script=True)
Default Value = True
9. footer_buttons_align & footer_buttons_spacing
Set the alignment and spacing of your footer buttons.
Ex.
alert2(footer_buttons_align='left',footer_buttons_spacing='medium')
Default Value = right | small
10. background_image
You can pass an Image Component. This will set the background image of your alert.
Ex.
img=Image(source='image.png')
alert2(background_image=img)
Default Value = None
11. background_image_display
Accepts either ‘shrink_to_fit’ or ‘zoom_to_fill’
Ex.
img=Image(source='image.png')
alert2(background_image=img,background_image_display='zoom_to_fill')
Default Value = shrink_to_fit
12. background
Set the background color.
Ex.
alert2(background='black')
Default Value = white
13. drag
Allows users to drag alert anywhere on the screen if set to true. Works with touch devices as well.
Ex.
alert2(drag=True)
Default Value = False
14. resize
Allows users to resize alert. It will not work on most touch devices or if drag is set to true. It can take the following values = ‘none’, 'horizontal, ‘vertical’, ‘both’
Ex.
alert2(drag='both')
Default Value = ‘none’
15. footer_color & header_color
Set the background color for headers and footers.
Ex.
alert2(footer_color='green',header_color='red')
Default Value = ‘transparent’
16. opacity
Set the opacity of your anvil app while the alert is displayed on the screen. Accepts values between 0 and 1
Ex.
alert2(opacity=0.8)
Default Value = 0.4
17. padding_top
Set the distance between the top of the screen and alert. You can pass an integer value (gets converted in px) or any supported CSS value.
Ex.
alert2(padding_top='50vh')
alert2(padding_top=30)
Default Value = 50
18. font_size
Set the size of the font. You can pass an integer value (gets converted in px) or any supported CSS value.
Ex.
alert2(font_size='0.5em')
alert2(font_size=18)
Default Value = 16
19. foreground
Set the color of the font.
Ex.
alert2( foreground='red')
alert2(foreground='#ffffff')
Default Value = ‘black’
20. width
Set the amount of screen to be covered by your alert. If set to None, it will cover 40% for landscape devices and 90% for portrait devices
Ex.
alert2(width=80)
Default Value = None
This has been a long post. Let me know if any trouble comes up.
