一、feffery_antd_componenet 中的 AntdSpace
feffery_antd_components（简称fac）中的AntdSpace组件是一个基于Ant Design的Dash第三方组件，它用于在水平或垂直方向上放置多个元素，并提供元素之间的间距。以下是AntdSpace组件的一些主要功能：
1、设置间距：
可以通过size属性来设置元素之间的间距，支持预设的small、middle、large三种尺寸，也可以自定义间距。
2、对齐方式：
可以设置子元素的对齐方式，通过align属性，可以设置为start、end、center、baseline。
3、自动换行：
通过wrap属性，可以设置是否自动换行，仅在水平方向上有效。
4、分隔符：
可以使用split属性来设置分隔符，例如在链接之间添加垂直分隔线。
5、紧凑模式：
AntdSpace.Compact用于表单组件之间紧凑连接且合并边框，支持的组件包括Button、AutoComplete、Cascader、DatePicker、Input、InputNumber、Select、TimePicker等。
6、垂直方向：
AntdSpace组件默认是水平方向的，但也可以设置为垂直方向，通过direction属性设置为vertical。
7、自定义尺寸：
可以通过传递一个数字给size属性来自定义间距大小。
8、预设间距：
AntdSpace组件提供了预设的间距大小，也可以通过CSS来进一步自定义样式。
二、代码
import dash
from dash import html
import feffery_antd_components as fac
from dash.dependencies import Output, Input, State
app = dash.Dash(__name__)
app.layout = html.Div(
[
fac.AntdSpace(
[
fac.AntdDivider('AntdSpace 的应用', innerTextOrientation='center'),
fac.AntdSpace(
[
fac.AntdText(
'对齐方向: '
),
fac.AntdRadioGroup(
id='space-align-input',
options=['start', 'end', 'center', 'baseline'],
value='start',
), # 单选按钮
],
size='large',
)
],
direction='vertical',
size='large',
style={
'width': '100%',
},
),
fac.AntdSpace(
[
fac.AntdText(
'间距大小: '
),
fac.AntdRadioGroup(
id='space-size-input',
options=['small', 'middle', 'large', '48'],
value='small', # 子容器改写默认值为 small
),
],
size='large', # AntdSpace设置size 默认值为 large
style={
'width': '100%',
}
),
fac.AntdSpace(
fac.AntdButton('添加 addSplitLIne 分割线', id='space-add-split-line', type='primary'),
style={
'padding': '5px',
}
),
fac.AntdSpace(
fac.AntdButton('添加自定义分割线', id='space-add-line', type='primary'),
style={
'padding': '5px',
}
),
fac.AntdParagraph(),
fac.AntdSpace(
fac.AntdButton('设置元素超宽后自动换行(wrap=True)', id='space-wrap', type='primary'),
style={
'padding': '5px'
}
),
fac.AntdSpace(
[
fac.AntdSpace(
[
fac.AntdButton(button_type, type=button_type, danger=danger)
for button_type, danger in [['primary', False], ['default', False], ['dashed', False], ['text', False], ['link', False]] * 5
],
wrap=False,
addSplitLine=True,
id='space-button1',
),
fac.AntdSpace(
[
fac.AntdButton(button_type, type=button_type, danger=danger)
for button_type, danger in [['primary', True], ['default', True], ['dashed', True], ['text', True], ['link', True]] * 5
],
wrap=False,
addSplitLine=True,
id='space-button2',
# customSplit=html.Div(
# style={'height': 30, 'borderRight': '1px dashed #8c8c8c'}
# )
),
],
direction='vertical',
# id='space-button',
),
fac.AntdParagraph(),
# 横向拓展
fac.AntdSpace(
[
html.Div(
style={
'backgroundColor': 'rgba(255, 255, 207, 1)',
'height': '20px',
'width': '50px',
}
),
html.Div(
style={
'backgroundColor': 'rgba(250, 240, 155, 1)',
'height': '40px',
'width': '50px',
}
),
html.Div(
style={
'backgroundColor': 'rgba(244, 234, 98, 1)',
'height': '60px',
'width': '50px',
}
),
html.Div(
style={
'backgroundColor': 'orange',
'height': '80px',
'width': '50px',
}
)
] * 2,
id='space-align-output1',
align='start', # 系统默认值也是 start
size='large',
style={
'backgroundColor': 'rgba(241, 241, 241, 0.8)',
'padding': '10px',
},
addSplitLine=True,
),
# 纵向拓展
fac.AntdDivider(),
fac.AntdSpace(
[
html.Div(
style={
'backgroundColor': 'rgba(243, 230, 195, 1)',
'height': '50px',
'width': '20px',
}
),
html.Div(
style={
'backgroundColor': 'rgba(217, 188, 154, 1)',
'height': '50px',
'width': '40px',
},
),
html.Div(
style={
'backgroundColor': 'rgba(218, 158, 106, 1)',
'height': '50px',
'width': '60px',
}
),
],
id='space-align-output2',
align='start', # 系统默认值也是 start
direction='vertical',
size='large',
style={
'backgroundColor': 'rgba(241, 241, 241, 0.8)',
'padding': '12px',
},
),
]
)
@app.callback(
[Output('space-align-output1', 'align'),
Output('space-align-output2', 'align'),
Output('space-button1', 'size'),
Output('space-button2', 'size'),
Output('space-align-output1', 'size'),
Output('space-align-output2', 'size'),
Output('space-button1', 'addSplitLine'),
Output('space-button2', 'addSplitLine'),
Output('space-align-output1', 'addSplitLine'),
Output('space-button1', 'customSplit'),
Output('space-button2', 'customSplit'),
Output('space-button1', 'wrap'),
Output('space-button2', 'wrap'),
],
[Input('space-align-input', 'value'), # align 对齐方向
Input('space-size-input', 'value'), # size 间距大小
Input('space-add-split-line', 'nClicks'), # addSplitLine
Input('space-add-line', 'nClicks'),
Input('space-wrap', 'nClicks'),
]
)
def update_space(value_align, value_size, nclick_add_split_line, nclick_add_line, nclick_wrap):
if value_align:
re_align = value_align
if value_size and value_size == '48':
re_size = 48
else:
re_size = value_size
if nclick_add_split_line and nclick_add_split_line % 2 == 1:
re_app_split_line = True
else:
re_app_split_line = False
if nclick_add_line and nclick_add_line % 2 == 1:
re_add_line = html.Div(
style={'height': 30, 'borderRight': '1px dashed #8c8c8c'}
)
else:
re_add_line = None
if nclick_wrap and nclick_wrap % 2 == 1:
re_wrap = True
else:
re_wrap = False
return [re_align, re_align,
re_size, re_size, re_size, re_size,
re_app_split_line, re_app_split_line, re_app_split_line,
re_add_line, re_add_line,
re_wrap, re_wrap]
if __name__ == '__main__':
app.run_server(debug=True)
