Plotly 破折號：dcc.RadioItems 垂直 alignment

Question

我想垂直對齊dash_core_components.RadioItems的所有選項。
根據破折號文檔，默認行為應包括RadioItems選項的垂直 alignment。 如果要水平對齊選項，則必須指定：

labelStyle={'display': 'inline-block'}

相反，作為默認行為，我得到一個水平 alignment 並且我不知道要指定什么作為display項目來獲得RadioItems選項的垂直 alignment。
直到現在我的嘗試：

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

Answer 1

您可以將labelStyle={'display': 'block'}屬性傳遞給dcc.RadioItems()以垂直對齊不同的選項，但我建議您遵循 Dash 社區論壇中的建議，即始終鏈接破折號 CSS 文件bWLwgP.css 。