I initially started with MATCH. Here’s what I struggled with: in the provided code, there are two callbacks. The commented one uses ALL and it functions correctly. The other one is where I attempted to use MATCH, but what I couldn’t achieve was hiding the other pages upon clicking. Below is the complete code "
from dash import Dash, dcc, html, Input, Output, ALL, MATCH, callback, ctx, no_update
from dash_iconify import DashIconify as icon
import dash_mantine_components as dmc
app = Dash(
__name__,
external_stylesheets=[
"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;900&display=swap"
],
)
footer_icon_with = 30
footer_icon_color = '#A519C7'
def id_dict (_id, index):
return {"type": f"{_id}", "index":f"{index}"}
def footer_action_link (_id, _index, _icon, is_default=False):
icon_text_size = 'xs'
icon_and_text_color = {}
if is_default:
icon_and_text_color = {'color':'rgb(34, 139, 230)'}
return dmc.Center(
children = [
dmc.Stack(
align="center",
children = [
dmc.ActionIcon(
id = id_dict (f'{_id}', _index),
variant='transparent',
style = icon_and_text_color,
children = [
icon(icon=_icon, width = footer_icon_with)
]
),
dmc.Text("Shop", size=icon_text_size, style = icon_and_text_color, id = id_dict (f'{_id}_text', _index)),
]
)
]
)
footer = dmc.Paper(
style= {'position': 'fixed', 'bottom':'0', 'width': '450px'},
children =[
dmc.Group(
position = 'apart',
children = [
footer_action_link ("page_switcher_action", "shop", 'tabler:shopping-bag', is_default=True),
footer_action_link ("page_switcher_action", "account", 'ic:sharp-person-outline'),
footer_action_link ("page_switcher_action", "cart", 'ic:outline-shopping-cart')
]
),
]
)
shop = dmc.Paper(
id = id_dict('page_layout_id', 'shop'),
style = {'display':'block'},
className = 'page',
children = [
dmc.Text("cart_page", size="md", color ='blue'),
]
)
account = dmc.Paper(
id = id_dict('page_layout_id', 'account'),
className = 'page',
style = {'display':'none'},
children = [
dmc.Text("account_page", size="md", color ='yellow'),
]
)
cart = dmc.Paper(
id = id_dict('page_layout_id', 'cart'),
style = {'display':'none'},
className = 'page',
children = [
dmc.Text("cart_page", size="md", color ='blue'),
]
)
content = dmc.Container(
className = 'content',
children = [
shop,
account,
cart,
]
)
app.layout = html.Div(
style={"height": 930, "width": 450, 'border': '2px solid red', 'overflow':'scroll'},
children=[
html.Div(
children = [
content,
footer
]
)
]
)
# @app.callback(
# Output({"type": "page_layout_id", "index": ALL}, "style"),
# Output({"type": "page_switcher_action", "index": ALL}, "style"),
# Output({"type": "page_switcher_action_text", "index": ALL}, "style"),
# Input({"type": "page_switcher_action", "index": ALL}, "n_clicks"),
# prevent_initial_call=True
# )
# def page_switcher(action_click):
# print(ctx.outputs_list[0])
# triggered_input = ctx.triggered_id['index']
# output_list = [i['id']['index'] for i in ctx.outputs_list[0]]
# print(output_list)
# number_of_outputs, triggered_input_index = len(output_list), output_list.index(triggered_input)
# page_output_list = [{'display':'none'}] * number_of_outputs
# action_item_output_list = [{}] * number_of_outputs
# page_output_list[triggered_input_index] = {'display':'block'}
# action_item_output_list[triggered_input_index] = {'color':'rgb(34, 139, 230)'}
# return page_output_list, action_item_output_list, action_item_output_list
@app.callback(
Output({"type": "page_layout_id", "index": MATCH}, "style"),
Input({"type": "page_switcher_action", "index": MATCH}, "n_clicks"),
prevent_initial_call=True
)
def page_switcher(action_click):
return {'display':'block'}
if __name__ == "__main__":
app.run_server(debug=True, host='0.0.0.0', port=8050 )
