Panel
Creates a ribbon with a symbol, text and a button with a link embedded.
Input variables:
href: str
text: str
button_panel: str
symbol_name: str = โinsightsโ
Example of use:
s.plt.html(
order=0,
html=s.html_components.panel(
href='https://docs.shimoku.com/development/',
text='Attention, this is a link to the documentation you need',
button_panel='Read more',
symbol_name='insights'
)
)

symbol_name
is a fixed small drawing at the left, you can add an explanatory text and the link is accessed on the button to open it in a new window. You can customize it using other symbols and text, and changing its size.
This is an example:
s.plt.html(
order=0, cols_size=4,
html=s.html_components.panel(
href='https://docs.shimoku.com/development/',
text='Warning: Connect the equipment to the right Voltage Source: 220V',
button_panel='Read more',
symbol_name='safety'
)
)

You can change the small symbol at the left:
s.plt.html(
order=0, cols_size=4,
html=s.html_components.panel(
href='https://docs.shimoku.com/development/',
text='Warning: Connect the equipment to the right Voltage Source: 220V',
button_panel='Read more',
symbol_name='warning'
)
)

The text in the button and other symbols (Google Material Symbols) can be added, and the position is modified too:
s.plt.html(
order=0, cols_size=4, padding='1,0,0,8',
html = s.html_components.panel(
href='https://docs.shimoku.com/development/',
text='Warning: Connect the equipment to the right Voltage Source: 220V',
button_panel='User Guide',
symbol_name='safety_check'
)
)

padding='1,0,0,8'
moves down one space and 8 to the left.More on how to use the Grid.
Video demonstration
Last updated
Was this helpful?