[英]Plotly-Dash: Hide and Unhide Dropdown
I would like to launch my Dash with my dropdown hide and after selecting something on another dropdown unhide my first dropdown.我想用我的下拉菜单隐藏启动我的 Dash,然后在另一个下拉菜单上选择某些内容后,取消隐藏我的第一个下拉菜单。 Idk if you have any idea, maybe it's a mistake on my little script.
如果您有任何想法,我想知道,也许这是我的小脚本上的错误。
This is a little example:这是一个小例子:
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash('example')
app.layout = html.Div([
dcc.Dropdown(
id = 'dropdown-to-show_or_hide-element',
options=[
{'label': 'Show element', 'value': 'on'},
{'label': 'Hide element', 'value': 'off'}
],
value = 'off'
),
# Create Div to place a conditionally visible element inside
html.Div([
# Create element to hide/show, in this case an 'Input Component'
dcc.Input(
id = 'element-to-hide',
placeholder = 'something',
value = 'Can you see me?',
)
], style= {'display': 'none'} # <-- This is the line that will be changed by the dropdown callback
)
])
@app.callback(
Output(component_id='element-to-hide', component_property='style'),
[Input(component_id='dropdown-to-show_or_hide-element', component_property='value')])
def show_hide_element(visibility_state):
if visibility_state == 'on':
return {'display': 'block'}
if visibility_state == 'off':
return {'display': 'none'}
if __name__ == '__main__':
app.server.run(debug=False, threaded=True)
By slightly changing your code (I changed the parameter that your function takes and using that same parameter in the if statement, this code seems to work).通过稍微更改您的代码(我更改了您的 function 采用的参数并在 if 语句中使用相同的参数,此代码似乎有效)。 I also change the original style to
block
, which allows the element to be there, but only shown when on the show
dropdown.我还将原始样式更改为
block
,这允许元素存在,但仅在show
下拉列表中显示。
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash('example')
app.layout = html.Div([
dcc.Dropdown(
id = 'dropdown-to-show_or_hide-element',
options=[
{'label': 'Show element', 'value': 'on'},
{'label': 'Hide element', 'value': 'off'}
],
value = 'off'
),
# Create Div to place a conditionally visible element inside
html.Div([
# Create element to hide/show, in this case an 'Input Component'
dcc.Input(
id = 'element-to-hide',
placeholder = 'something',
value = 'Can you see me?',
)
], style= {'display': 'block'} # <-- This is the line that will be changed by the dropdown callback
)
])
@app.callback(
Output(component_id='element-to-hide', component_property='style'),
[Input(component_id='dropdown-to-show_or_hide-element', component_property='value')])
def show_hide_element(value):
if value == 'on':
return {'display': 'block'}
if value == 'off':
return {'display': 'none'}
if __name__ == '__main__':
app.server.run(debug=False)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.