破折号情节引导数字输入放置

Question

所以我想如图所示放置我的文本框

但是，我的代码不起作用，而是向我显示这个

这是我的编码：

html.H1("Query1", style={'text-align': 'center','fontSize': 30}),
            dbc.Row(
                [
            dbc.Col(dcc.Graph(id='graphQ', figure={}),md=8),
            html.P("1"),
            dbc.Col(dbc.Input(type="number", min=0, max=10, step=1),),
            html.P("2"),
            dbc.Col(dbc.Input(type="number", min=0, max=10, step=1)),
            ]),
            dbc.Row(
                [
            html.P("1"),
            dbc.Col(dbc.Input(type="number", min=0, max=10, step=1),),
            html.P("2"),
            dbc.Col(dbc.Input(type="number", min=0, max=10, step=1),)],
                align="end",
            )
            ])]))

感谢任何帮助！

Answer 1

你可以这样做：

def custom_input(paragraph_text, min_value=0, max_value=10, step=1):
    return html.Div(
        children=[
            html.P(paragraph_text, style={"paddingRight": 10}),
            dbc.Input(type="number", min=min_value, max=max_value, step=step),
        ],
        style={"display": "flex"},
    )


app.layout = html.Div(
    children=[
        html.H1("Query1", style={"textAlign": "center", "fontSize": 30}),
        dbc.Row(
            [
                dbc.Col(dcc.Graph(id="graphQ", figure={}), md=8),
                dbc.Col(
                    children=[
                        dbc.Row(
                            [
                                dbc.Col(custom_input("1")),
                                dbc.Col(custom_input("2")),
                            ],
                            style={"paddingBottom": 30},
                        ),
                        dbc.Row(
                            [
                                dbc.Col(custom_input("1")),
                                dbc.Col(custom_input("2")),
                            ],
                            style={"paddingBottom": 30},
                        ),
                    ],
                    md=4,
                ),
            ]
        ),
    ]
)

我已将您的标签/输入组件组合抽象为一个自定义函数，希望使布局方法更清晰，代码更可重用。

所以我的想法是我们只需要一行两列。其中第一列包含整个图表。

第二列由两行组成，每行包含两列，每列包含一个自定义输入。