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

二、代码

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)