我需要隐藏一些组件,例如通过单击复选框(例如,图形或表格)。但是,文档没有为此目的提供合适的部分。提前谢谢!
答案 0 :(得分:1)
您可以将需要隐藏的组件放在html.div([])
内,并在回调中将'display'选项更改为'none'。回调应该有一个Dropdown as Input ,而html.div([])
中的Component as Output 。
以下是一个Web应用程序,其中仅包含Dropdown和一个基于Dropdown值可见/隐藏的输入组件。 它应该在复制时直接工作:
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 = 'on'
),
# 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(visibility_state):
if visibility_state == 'on':
return {'display': 'block'}
if visibility_state == 'off':
return {'display': 'none'}
if __name__ == '__main__':
app.run_server(debug=True)
请注意,如果在html.div([])
内放置了多个组件,则回调仍将仅更改其输出的组件的'display'属性。因此,您可以将其他Dash组件放在同一个Div中,而不会影响其可见性。
希望这能正确回答你的问题。
答案 1 :(得分:-1)
dcc.RadioItems(
id='show-table',
options=[{'label': i, 'value': i} for i in ['None', 'All', 'Alerts']],
value='None',
labelStyle={'display': 'inline-block'}
)
html.Div([
dash_table.DataTable(
id = 'datatable',
data=today_df.to_dict('records'),
columns=[{'id': c, 'name': c} for c in today_df.columns],
fixed_columns={ 'headers': True, 'data': 1 },
fixed_rows={ 'headers': True, 'data': 0 },
style_cell={
# all three widths are needed
'minWidth': '150px', 'width': '150px', 'maxWidth': '500px',
'whiteSpace': 'no-wrap',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
},
style_table={'maxWidth': '1800px'},
filter_action="native",
sort_action="native",
sort_mode='multi',
row_deletable=True),
], style={'width': '100%'}, id='datatable-container')
@app.callback(
dash.dependencies.Output('datatable-container', 'style'),
[dash.dependencies.Input('show-table', 'value')])
def toggle_container(toggle_value):
print(toggle_value, flush=True)
if toggle_value == 'All':
return {'display': 'block'}
else:
return {'display': 'none'}