CODEWITHSUNDEEP
pythonplotlyplotly-dash
Toofan
Toofan

Reputation: 65

how to add html lists to dash layout

I need to add a list of words to dash layout in specific location on screen and dynamically (meaning list of words is changing with time): 

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly
import plotly.graph_objs as go



app = dash.Dash(__name__)


trends =['python', 'flask', 'jave']

html_lists = []


trends =['python', 'flask', 'jave']

app.layout = html.Div(
    html.Div(
        className="trend",
        children=[
            html.Ui(
                for i in trends:
                    html.Li(i))
        ], )
    )
print(html_ul_list)
if __name__ == '__main__':
    app.run_server(debug=True)

I need output on webpage to be like this on the right of screen :

Trends

Upvotes: 3

Views: 8663

Answers (1)

coralvanda
coralvanda

Reputation: 6596

You have a couple of minor errors. I tested this and it works:

app = dash.Dash(__name__)

trends = ['python', 'flask', 'java']

app.layout = html.Div(
    html.Div(
        className="trend",
        children=[
            html.Ul(id='my-list', children=[html.Li(i) for i in trends])
        ],
    )
)

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

To get this list to update dynamically, you need to hook up a callback that outputs like this: Output('my-list', 'children'). What inputs that callback will take you may already know, but that wasn't part of your post so I left that out.

Upvotes: 7

Related Questions