| name | dash-3-layout-components |
| description | Sub-skill of dash: 3. Layout Components. |
| version | 1.0.0 |
| category | data-analysis |
| type | reference |
| scripts_exempt | true |
3. Layout Components
3. Layout Components
HTML Components:
from dash import html
layout = html.Div([
html.H1("Main Title"),
html.H2("Subtitle"),
html.H3("Section Header"),
html.P("Paragraph text with ", html.Strong("bold"), " and ", html.Em("italic")),
html.Hr(),
html.Br(),
html.Ul([
html.Li("Item 1"),
html.Li("Item 2"),
html.Li("Item 3")
]),
html.A("Click here", href="https://example.com", target="_blank"),
html.Img(src="/assets/logo.png", style={"width": "200px"}),
html.Table([
html.Thead([
html.Tr([html.Th("Name"), html.Th("Value")])
]),
html.Tbody([
html.Tr([html.Td("Item 1"), html.Td("100")]),
html.Tr([html.Td("Item 2"), html.Td("200")])
])
])
])
Core Components (dcc):
from dash import dcc
components = html.Div([
dcc.Dropdown(
id="dropdown",
options=[
{"label": "Option A", "value": "a"},
{"label": "Option B", "value": "b"},
{"label": "Option C", "value": "c", "disabled": True}
],
value="a",
multi=False,
clearable=True,
searchable=True,
placeholder="Select..."
),
dcc.Dropdown(
id="multi-dropdown",
options=[{"label": f"Option {i}", "value": i} for i in range(10)],
value=[1, 2, 3],
multi=True
),
dcc.Slider(
id="slider",
min=0,
max=100,
step=5,
value=50,
marks={0: , : , : , : , : }
),
dcc.RangeSlider(
=,
=,
=,
step=,
value=[, ],
marks={i: (i) i (, , )}
),
dcc.Input(
=,
=,
placeholder=,
debounce=
),
dcc.Textarea(
=,
placeholder=,
style={: , : }
),
dcc.Checklist(
=,
options=[
{: , : },
{: , : },
{: , : }
],
value=[],
inline=
),
dcc.RadioItems(
=,
options=[
{: , : },
{: , : },
{: , : }
],
value=,
inline=
),
dcc.DatePickerSingle(
=,
date=,
display_format=
),
dcc.DatePickerRange(
=,
start_date=,
end_date=,
display_format=
),
dcc.Upload(
=,
children=html.Div([, html.A()]),
style={
: ,
: ,
: ,
: ,
: ,
: ,
:
}
),
dcc.Tabs(=, value=, children=[
dcc.Tab(label=, value=),
dcc.Tab(label=, value=)
]),
dcc.Loading(
=,
=,
children=html.Div(=)
),
dcc.Interval(
=,
interval=,
n_intervals=
),
dcc.Store(=, storage_type=),
dcc.Graph(
=,
config={
*Content truncated — see parent skill full reference.*