Plotly Dash：dcc.RadioItems 垂直对齐

Posted 2023-03-05

【中文标题】Plotly Dash：dcc.RadioItems 垂直对齐

【英文标题】：Plotly Dash: dcc.RadioItems vertical alignment

【发布时间】：2020-09-20 01:32:31

【问题描述】：

我想垂直对齐dash_core_components.RadioItems 的所有选项。 根据dash documentation，默认行为应包括RadioItems 选项的垂直对齐。如果您想水平对齐选项，则必须指定：

labelStyle='display': 'inline-block'

相反，作为默认行为，我得到一个水平对齐，但我不知道要指定什么作为display 项目来获得RadioItems 选项的垂直对齐。 这是我到目前为止的尝试：

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

app = dash.Dash()

app.layout = html.Div([dcc.RadioItems(id = 'input-radio-button',
                                      options = [dict(label = 'A', value = 'A'),
                                                 dict(label = 'B', value = 'B')],
                                      value = 'A'),
                       html.P(id = 'output-text')])


@app.callback(Output('output-text', 'children'),
              [Input('input-radio-button', 'value')])
def update_graph(value):
    return f'The selected value is value'


if __name__ == "__main__":
    app.run_server()

我得到了什么：

我想得到这样的结果（图像手动编辑）：

我在提到这个问题的地方找到了this reference。在那里，建议通过引用外部样式表来解决它。如果可能的话，我想通过在 RadioItems 元素的定义中指定正确的选项来避免这种转变并解决它。

版本信息：

Python  3.7.0
dash    1.12.0
plotly  4.7.0

【参考方案1】：

您可以将labelStyle='display': 'block' 属性传递给dcc.RadioItems() 以便垂直对齐不同的选项，但我建议您遵循Dash 社区论坛中的建议，即始终链接Dash CSS 文件bWLwgP.css .

【讨论】：

非常感谢！问题是我已经使用了这个样式表：app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])。我可以管理两个不同的样式表吗？

是的，您可以包含多个样式表，即使某些属性可能会相互覆盖。对于您的情况，这似乎没问题，如果我使用app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP, 'https://codepen.io/chriddyp/pen/bWLwgP.css']) 运行上面的代码，则单选项目选项将自动垂直对齐（即不添加labelStyle='display': 'block'）。

非常感谢！