bounty将在6天后过期。回答此问题可获得+50声望奖励。Chopin希望引起更多人关注此问题。
我可以调整各种dcc
组件周围/之间的边距和填充。但我的目标是增加这些函数内的空间。我下面有一个Checklist
和RadioItems
。我想增加图标和文本之间的空白空间。我已经在下面的底部行硬编码了一些空间。但是,是否有办法将其合并到ClassName
或style
参数中?
import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets,suppress_callback_exceptions=True)
app.layout = dbc.Container([
dbc.Row([
dbc.Col([html.Label('Item', style={'paddingTop': '2rem', 'display': 'inline-block'}),
dcc.Checklist(
id='Cats',
options=[
{'label': 't', 'value': 't'},
{'label': 'y', 'value': 'y'},
{'label': 'f', 'value': 'f'},
{'label': 'j', 'value': 'j'},
{'label': 'k', 'value': 'k'},
{'label': ' s', 'value': ' s'},
],
value=['t', 'y', 'f', 'j', 'k', ' s'],
labelStyle = {'display': 'block'},
style = { "overflow":"auto", 'margin-right': '50px'}
),
html.Label('Type', style={'paddingTop': '2rem', 'display': 'inline-block'}),
dcc.RadioItems(['A', 'B', ' C'], 'Scatter',
inline=True),
], width=2),
dbc.Col([
html.Div(dcc.Graph())
], width=5),
],
className = "four columns vstack gap-2 h-75",
style = {'padding':'2rem'}
)
], fluid=True)
if __name__ == '__main__':
app.run_server(debug=True, port=8051)
预期输出:我已经在最后一项中为检查表和单选项硬编码了预期的空间。我希望传递一个函数来完成这个操作。
编辑2:文本长度不均匀:
values = ['t', 'y', 'f', 'j', 'k', ' s']
options = []
radio_values = ['Aa','Bbbbb','Ccc']
radio_options = []
for i in values:
options.append({'label': html.Div(i, style={"display": "inline-block", 'font-size': 15, 'padding-left': "0.5rem"}), 'value': i})
for i in radio_values:
radio_options.append({'label': html.Div(i,style={"display": "inline", "padding-left":"0.5rem"}),'value': i})
app.layout = dbc.Container([
dbc.Row([
dbc.Col([html.Label('Item', style={'display': 'inline'}),
dcc.Checklist(
id='Cats',
options=options,
value=values,
labelStyle = {"width":"3rem"},
style = {'display': 'flex'}
),
html.Label('Type', style={}),
dcc.RadioItems(radio_options,'A', labelStyle= {"width":"3rem"}, style = {'display': 'flex'}),
], width=5),
dbc.Col([
html.Div(dcc.Graph())
], width=5),
],
className = "four columns vstack gap-2 h-75",
style = {'padding':'2rem'}
)
], fluid=True)
if __name__ == '__main__':
app.run_server(debug=True, port=8051)
1条答案
按热度按时间szqfcxe21#
你可以根据自己的喜好使用html.div作为lebal和style,如下所示:
此外,还需要将标签样式更改为
flex
:我优化了下面的代码:
输出: