将破折号仪表板中的 InputGroupAddon 与 Python 垂直对齐
Vertically align InputGroupAddon in dash dashboard with Python
我正在开发仪表板。我正在使用一些 dash_bootstrap_components InputGroup。这是我到目前为止所做的：
我想垂直对齐 InputGroupAddon 'prepend' 和 InputGroup 的 InputGroupAddon 'append'，例如：
我想拉伸 dbc.InputGroupAddon 'prepend' 和 dbc.InputGroupAddon 'append' 宽度，让 dbc.Input 自动调整以填充宽度。
我想将整体宽度保持为 400.
这是我的代码：
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
n = 19
v_min = 0
v_max = 10
v_step = 1
v_0 = 5
app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
app.layout = html.Div(id = 'general_div',
children = [html.Div(id = 'options_div',
children = [dbc.InputGroup([dbc.InputGroupAddon(children = 'Option A',
addon_type = 'prepend'),
dbc.Input(id = 't_ON_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'unit',
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = 'Option B',
addon_type = 'prepend'),
dbc.Input(id = 't_OFF_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'an other unit',
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = 'Some text here',
addon_type = 'prepend'),
dbc.Input(id = 'T_start_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'something',
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = 'Last option',
addon_type = 'prepend'),
dbc.Input(id = 'voltage_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'last unit',
addon_type = 'append')])],
style = {'display': 'inline-block',
'vertical-align': 'top',
'margin-left': '3vw',
'margin-top': '3vw',
'width': 400})])
if __name__ == "__main__":
app.run_server()
我曾尝试在 style 参数下指定 'width'，如下所示：
dbc.InputGroupAddon(children = 'Option A',
addon_type = 'prepend',
style = {'width': 200}),
dbc.Input(id = 't_ON_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'unit',
addon_type = 'append')
但我明白了：
dbc.InputGroup 在 dbc.InputGroupAddon 和 dbc.Input 之间断开。
版本信息
Python 3.7.0
dash 1.12.0
dash-bootstrap-components 0.10.1
dash-html-components 1.0.3
我终于解决了问题。
我已将 class 分配给文本跨度并链接了本地 css 样式表（位于文件夹 assets\ 中）：
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
n = 19
v_min = 0
v_max = 10
v_step = 1
v_0 = 5
app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP, 'box_style.css'])
app.layout = html.Div(id = 'general_div',
children = [html.Div(id = 'options_div',
children = [dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Option A',
className = 'prepend-text'),
addon_type = 'prepend'),
dbc.Input(id = 't_ON_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = html.Span(children = 'unit',
className = 'append-text'),
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Option B',
className = 'prepend-text'),
addon_type = 'prepend'),
dbc.Input(id = 't_OFF_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = html.Span(children = 'another unit',
className = 'append-text'),
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Some text here',
className = 'prepend-text'),
addon_type = 'prepend'),
dbc.Input(id = 'T_start_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = html.Span(children = 'something',
className = 'append-text'),
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Last option',
className = 'prepend-text'),
addon_type = 'prepend'),
dbc.Input(id = 'voltage_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = html.Span(children = 'last unit',
className = 'append-text'),
addon_type = 'append')])],
style = {'display': 'inline-block',
'vertical-align': 'top',
'margin-left': '3vw',
'margin-top': '3vw',
'width': 400})])
if __name__ == "__main__":
app.run_server()
我从破折号默认值复制了样式表 class 并添加了 width、border-radius 和 text-align 属性（width 是关键 属性解决上述问题，剩下的就是进一步的审美调整）。这是我的本地 css:
.prepend-text {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: .375rem .75rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
width: 150px;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0rem;
border-bottom-right-radius: 0rem;
border-bottom-left-radius: 0.25rem;
}
.form-control {
display: block;
width: 100%;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
width: 130px;
text-align: right;
}
.append-text {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: .375rem .75rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
width: 120px;
border-top-left-radius: 0rem;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0rem;
}
这给了我这个布局：
我正在开发仪表板。我正在使用一些 dash_bootstrap_components InputGroup。这是我到目前为止所做的：
我想垂直对齐 InputGroupAddon 'prepend' 和 InputGroup 的 InputGroupAddon 'append'，例如：
我想拉伸 dbc.InputGroupAddon 'prepend' 和 dbc.InputGroupAddon 'append' 宽度，让 dbc.Input 自动调整以填充宽度。
我想将整体宽度保持为 400.
这是我的代码：
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
n = 19
v_min = 0
v_max = 10
v_step = 1
v_0 = 5
app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
app.layout = html.Div(id = 'general_div',
children = [html.Div(id = 'options_div',
children = [dbc.InputGroup([dbc.InputGroupAddon(children = 'Option A',
addon_type = 'prepend'),
dbc.Input(id = 't_ON_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'unit',
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = 'Option B',
addon_type = 'prepend'),
dbc.Input(id = 't_OFF_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'an other unit',
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = 'Some text here',
addon_type = 'prepend'),
dbc.Input(id = 'T_start_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'something',
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = 'Last option',
addon_type = 'prepend'),
dbc.Input(id = 'voltage_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'last unit',
addon_type = 'append')])],
style = {'display': 'inline-block',
'vertical-align': 'top',
'margin-left': '3vw',
'margin-top': '3vw',
'width': 400})])
if __name__ == "__main__":
app.run_server()
我曾尝试在 style 参数下指定 'width'，如下所示：
dbc.InputGroupAddon(children = 'Option A',
addon_type = 'prepend',
style = {'width': 200}),
dbc.Input(id = 't_ON_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = 'unit',
addon_type = 'append')
但我明白了：
dbc.InputGroup 在 dbc.InputGroupAddon 和 dbc.Input 之间断开。
版本信息
Python 3.7.0
dash 1.12.0
dash-bootstrap-components 0.10.1
dash-html-components 1.0.3
我终于解决了问题。
我已将 class 分配给文本跨度并链接了本地 css 样式表（位于文件夹 assets\ 中）：
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
n = 19
v_min = 0
v_max = 10
v_step = 1
v_0 = 5
app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP, 'box_style.css'])
app.layout = html.Div(id = 'general_div',
children = [html.Div(id = 'options_div',
children = [dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Option A',
className = 'prepend-text'),
addon_type = 'prepend'),
dbc.Input(id = 't_ON_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = html.Span(children = 'unit',
className = 'append-text'),
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Option B',
className = 'prepend-text'),
addon_type = 'prepend'),
dbc.Input(id = 't_OFF_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = html.Span(children = 'another unit',
className = 'append-text'),
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Some text here',
className = 'prepend-text'),
addon_type = 'prepend'),
dbc.Input(id = 'T_start_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = html.Span(children = 'something',
className = 'append-text'),
addon_type = 'append')]),
dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Last option',
className = 'prepend-text'),
addon_type = 'prepend'),
dbc.Input(id = 'voltage_input',
type = 'number',
min = v_min,
max = v_max,
step = v_step,
value = v_0),
dbc.InputGroupAddon(children = html.Span(children = 'last unit',
className = 'append-text'),
addon_type = 'append')])],
style = {'display': 'inline-block',
'vertical-align': 'top',
'margin-left': '3vw',
'margin-top': '3vw',
'width': 400})])
if __name__ == "__main__":
app.run_server()
我从破折号默认值复制了样式表 class 并添加了 width、border-radius 和 text-align 属性（width 是关键 属性解决上述问题，剩下的就是进一步的审美调整）。这是我的本地 css:
.prepend-text {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: .375rem .75rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
width: 150px;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0rem;
border-bottom-right-radius: 0rem;
border-bottom-left-radius: 0.25rem;
}
.form-control {
display: block;
width: 100%;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
width: 130px;
text-align: right;
}
.append-text {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: .375rem .75rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
width: 120px;
border-top-left-radius: 0rem;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0rem;
}
这给了我这个布局：