Python Sidebar Examples

Example #1

    src=tools.relpath(
        'https://images.prismic.io/plotly-marketing-website/6fc81948-6832-45b5-9ab7-cf3ca93275b1_sidebar_ads_4-7-21.jpeg?auto=compress,format'
    ),
    href='https://go.plotly.com/sports-analytics')

app.title = 'Dash User Guide and Documentation - Dash by Plotly'

app.layout = html.Div([
    # div used in tests
    html.Div(id='wait-for-layout'),
    dcc.Location(id='location', refresh=False),
    header,
    html.Div(className='content-wrapper',
             children=[
                 html.Div([
                     dugc.Sidebar(urls=SIDEBAR_INDEX),
                     html.A(html.Img(id='sidebar-image-img',
                                     className='sidebar-image',
                                     src=DEFAULT_AD['src'],
                                     alt=DEFAULT_AD['alt']),
                            id='sidebar-image-link',
                            className='sidebar-image-link',
                            href=DEFAULT_AD['href']),
                 ],
                          className='sidebar-container'),
                 html.Div([
                     html.Div(id='backlinks-top', className='backlinks'),
                     html.Div(html.Div(id='chapter', className='content'),
                              className='content-container'),
                     html.Div(id='backlinks-bottom', className='backlinks'),
                 ],

Example #2

import dash_user_guide_components
import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    dash_user_guide_components.Sidebar(id='input',
                                       value='my-value',
                                       label='my-label'),
    html.Div(id='output')
])


@app.callback(Output('output', 'children'), [Input('input', 'value')])
def display_output(value):
    return 'You have entered {}'.format(value)


if __name__ == '__main__':
    app.run_server(debug=True)