python - 破折号情节引导数字输入放置
问题描述
这是我的编码:
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",
)
])]))
任何帮助表示赞赏!
解决方案
你可以这样做:
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,
),
]
),
]
)
我已将您的标签/输入组件组合抽象为一个自定义函数,以希望使布局方法更清晰,代码更可重用。
所以我的想法是我们只需要一行两列。其中第一列由整个图表组成。
第二列由两行组成,每行包含两列,每列包含一个自定义输入。
推荐阅读
- sql-server - SSIS 包:权限
- python - 如何将值分配给数组的给定索引并平均重复索引?
- c# - 如何存储不同环境的凭据 .NET Core 2.1
- r - 使用指标和列更改列的值
- scala - 在scala中按2列值的范围将1行拆分为多行
- python - 为什么会出现此错误(程序因使用 13 cpu 秒而关闭)
- excel - Excel - 总和嵌套级别
- node.js - 如何将背景照片放入其中一个盒子 React,尝试了所有内容?
- excel - 通过限制搜索电子邮件,其中主题包含非 ascii 字符(unicode #160)
- ios - 如何使用相同的模型对象在视图控制器之间传递模型数据