'Children' 属性 达世币 Python html
'Children' Property in Dash Python html
我对 'children' 甚至在 Dash html 中所做的事情感到很困惑。为什么它甚至存在?你为什么要用它?我尝试阅读文档,但帮助不大。
参考下面的代码块:
- children 属性 甚至在第一行做什么?
- 你不能用类似 'figure' 的东西替换 children 吗?
代码块:
app.layout = html.Div(children=[
# TODO1: Add title to the dashboard
html.H1("Airline Dashboard by CK", style = {'text-align':'center'}),
# REVIEW2: Dropdown creation
# Create an outer division
html.Div([
# Add an division
html.Div([
# Create an division for adding dropdown helper text for report type
html.Div(
[
html.H2('Report Type:', style={'margin-right': '2em'}),
]
),
# TODO2: Add a dropdown
dcc.Dropdown(id = 'input-type',
options = [{'label':'Yearly Airline Performance Report', 'value': 'OPT1'},
{'label':'Yearly Average Flight Delay Statistics', 'value': 'OPT2'}],
multi = False,
placeholder = 'Select a Report Type',
style={'width': '80%', 'padding': '3px', 'font-size': '20px', 'text-align-last': 'center'}
)
# Place them next to each other using the division style
], style={'display': 'flex'}),
# Add next division
html.Div([
# Create an division for adding dropdown helper text for choosing year
html.Div(
[
html.H2('Choose Year:', style={'margin-right': '2em'})
]
),
dcc.Dropdown(id='input-year',
# Update dropdown values using list comphrehension
options=[{'label': i, 'value': i} for i in year_list],
placeholder="Select a year",
style={'width': '80%', 'padding': '3px', 'font-size': '20px', 'text-align-last': 'center'}),
# Place them next to each other using the division style
], style={'display': 'flex'}),
]),
# Add Computed graphs
# REVIEW3: Observe how we add an empty division and providing an id that will be updated during callback
html.Div([], id='plot1'),
html.Div([
html.Div([], id='plot2'),
html.Div([], id='plot3')
], style={'display': 'flex'}),
# TODO3: Add a division with two empty divisions inside. See above disvision for example.
html.Div([
html.Div([], id='plot4'),
html.Div([], id='plot5')
], style = {'display':'flex'})
])
# Callback function definition
# TODO4: Add 5 ouput components
@app.callback(
[Input(component_id='input-type', component_property='value'),
Input(component_id='input-year', component_property='value')],
# REVIEW4: Holding output state till user enters all the form information. In this case, it will be chart type and year
[Output("plot1", 'children'), Output("plot2", "children"),
Output("plot3", "children"), Output("plot4", "children"),
Output("plot5", "children")
])
来自文档的 this page:
- The children property is special. By convention, it's always the first attribute which means that you can omit it: html.H1(children='Hello Dash') is the same as html.H1('Hello Dash'). Also, it can contain a string, a number, a single component, or a list of components.
一些组件,例如 html.Div
和 html.P
,接受它们的 children
属性的值。其他的,例如 dcc.Graph
或 dcc.Dropdown
则不需要,并且需要其他道具才能正常运行。
正如@KarlKnechtel 在他的评论中提到的,当一个组件是另一个组件的子组件时,它表示第一个组件嵌套在另一个组件中。以下为类比:
在破折号中:
html.Div(
children=[
html.H1('This is some text'),
html.P('This is also some text'),
]
)
在HTML中:
<div>
<h1>This is some text</h1>
<p>This is also some text</p>
</div>
我希望这能回答你的问题。
编辑:
在 children
之后向此 html.Div
添加 style
将允许您更改 Div
的样式,这可能会影响嵌套在其中的组件的样式,但这不是 children
道具的目的。正如文档中提到的,您可以显式设置 children=
任何内容,或者您可以首先传递相同的值,没有显式关键字参数,Dash 会将其视为 children
道具。无论哪种方式,在幕后,组件仍在接收其 children
属性.
的值
children
属性 的目的是允许用户嵌套组件,就像我们在原始 HTML 中所做的那样。如果没有 children
属性,就不可能通过将相关项目包含在同一父元素中来将它们组合在一起(例如,将导航项目放在顶部导航栏中)。
我对 'children' 甚至在 Dash html 中所做的事情感到很困惑。为什么它甚至存在?你为什么要用它?我尝试阅读文档,但帮助不大。
参考下面的代码块:
- children 属性 甚至在第一行做什么?
- 你不能用类似 'figure' 的东西替换 children 吗?
代码块:
app.layout = html.Div(children=[
# TODO1: Add title to the dashboard
html.H1("Airline Dashboard by CK", style = {'text-align':'center'}),
# REVIEW2: Dropdown creation
# Create an outer division
html.Div([
# Add an division
html.Div([
# Create an division for adding dropdown helper text for report type
html.Div(
[
html.H2('Report Type:', style={'margin-right': '2em'}),
]
),
# TODO2: Add a dropdown
dcc.Dropdown(id = 'input-type',
options = [{'label':'Yearly Airline Performance Report', 'value': 'OPT1'},
{'label':'Yearly Average Flight Delay Statistics', 'value': 'OPT2'}],
multi = False,
placeholder = 'Select a Report Type',
style={'width': '80%', 'padding': '3px', 'font-size': '20px', 'text-align-last': 'center'}
)
# Place them next to each other using the division style
], style={'display': 'flex'}),
# Add next division
html.Div([
# Create an division for adding dropdown helper text for choosing year
html.Div(
[
html.H2('Choose Year:', style={'margin-right': '2em'})
]
),
dcc.Dropdown(id='input-year',
# Update dropdown values using list comphrehension
options=[{'label': i, 'value': i} for i in year_list],
placeholder="Select a year",
style={'width': '80%', 'padding': '3px', 'font-size': '20px', 'text-align-last': 'center'}),
# Place them next to each other using the division style
], style={'display': 'flex'}),
]),
# Add Computed graphs
# REVIEW3: Observe how we add an empty division and providing an id that will be updated during callback
html.Div([], id='plot1'),
html.Div([
html.Div([], id='plot2'),
html.Div([], id='plot3')
], style={'display': 'flex'}),
# TODO3: Add a division with two empty divisions inside. See above disvision for example.
html.Div([
html.Div([], id='plot4'),
html.Div([], id='plot5')
], style = {'display':'flex'})
])
# Callback function definition
# TODO4: Add 5 ouput components
@app.callback(
[Input(component_id='input-type', component_property='value'),
Input(component_id='input-year', component_property='value')],
# REVIEW4: Holding output state till user enters all the form information. In this case, it will be chart type and year
[Output("plot1", 'children'), Output("plot2", "children"),
Output("plot3", "children"), Output("plot4", "children"),
Output("plot5", "children")
])
来自文档的 this page:
- The children property is special. By convention, it's always the first attribute which means that you can omit it: html.H1(children='Hello Dash') is the same as html.H1('Hello Dash'). Also, it can contain a string, a number, a single component, or a list of components.
一些组件,例如 html.Div
和 html.P
,接受它们的 children
属性的值。其他的,例如 dcc.Graph
或 dcc.Dropdown
则不需要,并且需要其他道具才能正常运行。
正如@KarlKnechtel 在他的评论中提到的,当一个组件是另一个组件的子组件时,它表示第一个组件嵌套在另一个组件中。以下为类比:
在破折号中:
html.Div(
children=[
html.H1('This is some text'),
html.P('This is also some text'),
]
)
在HTML中:
<div>
<h1>This is some text</h1>
<p>This is also some text</p>
</div>
我希望这能回答你的问题。
编辑:
在 children
之后向此 html.Div
添加 style
将允许您更改 Div
的样式,这可能会影响嵌套在其中的组件的样式,但这不是 children
道具的目的。正如文档中提到的,您可以显式设置 children=
任何内容,或者您可以首先传递相同的值,没有显式关键字参数,Dash 会将其视为 children
道具。无论哪种方式,在幕后,组件仍在接收其 children
属性.
children
属性 的目的是允许用户嵌套组件,就像我们在原始 HTML 中所做的那样。如果没有 children
属性,就不可能通过将相关项目包含在同一父元素中来将它们组合在一起(例如,将导航项目放在顶部导航栏中)。