【Dash】feffery_antd_componenet 中的 AntdSpace

一、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来进一步自定义样式。

二、代码

python">import dash
from dash import html
import feffery_antd_components as fac
from dash.dependencies import Output, Input, Stateapp = 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 默认值为 largestyle={'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',  # 系统默认值也是 startsize='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',  # 系统默认值也是 startdirection='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'),  # addSplitLineInput('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_alignif value_size and value_size == '48':re_size = 48else:re_size = value_sizeif nclick_add_split_line and nclick_add_split_line % 2 == 1:re_app_split_line = Trueelse:re_app_split_line = Falseif 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 = Noneif nclick_wrap and nclick_wrap % 2 == 1:re_wrap = Trueelse:re_wrap = Falsereturn [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)