"margin": "32px auto 0" }) ]) return sandbox_structure app.layout = html.Div( [ # SandBoxLayout(), SandBoxLayout(), dtc.SideBar([ dtc.SideBarItem(id='id_1', label="Text 1", icon="fab fa-github"), dtc.SideBarItem(id='id_2', label="Text 2"), dtc.SideBarItem(id='id_3', label="Text 3"), dtc.SideBarItem(id='id_4', label="Text 4"), dtc.SideBarItem(id='id_5', label="Text 5"), ], className="testeee", id="sidebar", bg_color="blue"), html.Div(id="page_content", style={ "maxWidth": "1400px", 'height': '1000px', "overflowY": "auto" }), html.Div([ dtc.Carousel( content, dots=False, arrows=True,
import dash_html_components as html import dash_trich_components as dtc from dash.dependencies import Input, Output import pandas as pd content_1 = html.Div('content 1') content_2 = html.Div('content 2') content_3 = html.Div('content 3') content_4 = html.Div('content 4') content_5 = html.Div('content 5') app.layout = html.Div([ dtc.SideBar([ dtc.SideBarItem(id='id_1', label="Label 1", icon="fas fa-home"), dtc.SideBarItem(id='id_2', label="Label 2", icon="fas fa-chart-line"), dtc.SideBarItem(id='id_3', label="Label 3", icon="far fa-list-alt"), dtc.SideBarItem(id='id_4', label="Label 4", icon="fas fa-info-circle"), dtc.SideBarItem(id='id_5', label="Label 5", icon="fas fa-cog"), ]), html.Div(id="page_content") ]) @app.callback( Output("page_content", "children"), [ Input("id_1", "n_clicks_timestamp"), Input("id_2", "n_clicks_timestamp"), Input("id_3", "n_clicks_timestamp"), Input("id_4", "n_clicks_timestamp"), Input("id_5", "n_clicks_timestamp")
dtc.SideBar( bg_color=constants.NAVBAR_COLOR, children=[ dtc.SideBarItem( id=f"sidebaritem-{project}", icon=params["icon"], label=params["label"], ) for project, params in projects.items() ] + [ dhc.Hr(), ] + [ dhc.Div( style={"margin-left": "20px"}, children=[ dcc.Link( target="_blank", href=params["href"], style={"margin-left": "20px"}, children=[ dtc.SideBarItem( icon=params["icon"], label="", ), ], ), ], ) for link, params in links.items() ] + [ dhc.Hr(), ], ),
# 'backgroundColor': '#119DFF', # 'color': 'white', 'padding': '15px', 'height': '55px', 'margin': '8px 0px' } # dynamic app layout app.layout = html.Div( [ dtc.SideBar([ dtc.SideBarItem(id='id_1', label="Home", icon="fas fa-home"), dtc.SideBarItem( id='id_2', label="Dashboard", icon="fas fa-chart-line"), dtc.SideBarItem( id='id_3', label="Reports & Tables", icon="far fa-list-alt"), dtc.SideBarItem( id='id_4', label="Infos", icon="fas fa-info-circle"), dtc.SideBarItem(id='id_5', label="Settings", icon="fas fa-cog"), ], bg_color="#282828"), html.Div( [ html.Div( [ # navbar, navbar(logo="assets/logo-placeholder.png", height="50px"), html.Div(id="df-sharing", style={"display": "none"}), html.Div(id="comparison-infos", children=["AS", 70, 1],
dtc.SideBar([ dtc.SideBarItem(id="id_1", label="Login", icon="fas fa-sign-in-alt", className="sideBarItem"), dtc.SideBarItem(id="id_2", label="Explore", icon="fas fa-compass", className="sideBarItem"), dtc.SideBarItem(id="id_3", label="Scoring", icon="fas fa-chart-line", className="sideBarItem"), dtc.SideBarItem(id="id_4", label="Custom Graphing", icon="fas fa-chart-bar", className="sideBarItem"), dtc.SideBarItem(id="id_5", label="Timeline", icon="fas fa-tasks", className="sideBarItem"), dtc.SideBarItem(id="id_6", label="Timeline Daily", icon="fas fa-tasks", className="sideBarItem"), dtc.SideBarItem(id="id_7", label="Model Drift", icon="fas fa-drafting-compass", className="sideBarItem"), ], className="sideBar"),
import dash import dash_trich_components as dtc from dash.dependencies import Input, Output, State from config import app layout = dtc.SideBar([ dtc.SideBarItem(id='btn_homepage', label="Homepage", icon="fas fa-home"), dtc.SideBarItem(id='btn_detail', label="Detail", icon="fas fa-list-alt"), dtc.SideBarItem(id='btn_info', label="Info", icon="fas fa-info-circle"), ], bg_color='#9c1919', text_color='#ffffff') @app.callback(Output('url', 'pathname'), [ Input('btn_homepage', 'n_clicks_timestamp'), Input('btn_detail', 'n_clicks_timestamp'), Input('btn_info', 'n_clicks_timestamp') ], [State('url', 'pathname')]) def toggle_collapse(input1, input2, input3, url_curr): # todo: can I replace with *args or something? d_buttons = { 'btn_homepage': '/#', 'btn_detail': '/deep-dive', 'btn_info': '/info', } ctx = dash.callback_context if not ctx.triggered: