Panel
Creates a ribbon with a symbol, text and a button with a link embedded.
WARNING avoid special symbols such as
(, ), [, ] and similar in the texts of this component because it could break the look&feelInput variables:
href: str
text: str
button_panel: str
symbol_name: str = ‘insights’
Example of use:
# create the panel component
panel_html = 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')
shimoku.plt.html(
panel_html, menu_path='new-html5',
order=5, rows_size=2, cols_size=12,
)
The result is:
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:
# panel component
panel_html = 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'
)
shimoku.plt.html(
panel_html, menu_path='new-html6',
order=5, rows_size=5, cols_size=4,
)
The result is:
You can change the small symbol at left:
# panel component
panel_html = 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'
)
shimoku.plt.html(
panel_html, menu_path='new-html7',
order=5, rows_size=4, cols_size=4,
)
The text in the button and other symbols (Google Material Symbols) can be added, and the position is modified too:
# panel component
panel_html = 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'
)
shimoku.plt.html(
panel_html, menu_path='new-html8',
order=5, rows_size=4, cols_size=4,
padding='1,0,0,8',
)
The use of
padding='1,0,0,8' moves down one space and 8 to the left.Last modified 6mo ago