时间戳

首页 > 解决方案 > Plotly Dash：dcc.RadioItems 垂直对齐

python - Plotly Dash：dcc.RadioItems 垂直对齐

问题描述

我想垂直对齐 a 的所有选项dash_core_components.RadioItems。
根据破折号文档，默认行为应包括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()

我得到什么：

在此处输入图像描述

我想得到这样的结果（图像手动编辑）：
在此处输入图像描述

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

版本信息：

Python  3.7.0
dash    1.12.0
plotly  4.7.0

标签： pythonhtmlcssradio-buttonplotly-dash

解决方案

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

推荐阅读