【Dash】feffery_antd_components 按钮组件的应用

一、feffery_antd_componenet 中的 AntdFloatButton 和 AntdFloatButtonGroup

AntdFloatButton 和 AntdFloatButtonGroup 是两个用于创建悬浮按钮和悬浮按钮组的组件。

AntdFloatButton 是单个悬浮按钮组件，它提供了多种属性来定义按钮的外观及行为。AntdFloatButtonGroup 是一个悬浮按钮组组件，包含多个悬浮按钮，可通过 trigger 属性设置触发方式，通过open属性设置为受控模式。

详细说明可在 feffery_antd_components 的官方文档中找到相关组件的详细信息和使用示例。

二、代码

以下是所有悬浮按钮组件的演示代码的整合，方便大家学习和使用：

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.AntdHeader(
            fac.AntdTitle(
                '悬浮按钮 AntdFloatButton',
                level=2,
                style={'color': 'white'},
            ),
            style={
                'display': 'flex',
                'justifyContent': 'center',
                'alignItems': 'center',   # 对齐方式
            },
        ),

        # 悬浮按钮演示
        fac.AntdContent(
            fac.AntdTitle(
                '悬浮按钮演示:',
                level=4,
                style={'margin': '10px'},
            ),
            style={'display': 'flex', 'alignItems': 'center'},
        ),

        # 悬浮按钮种类
        fac.AntdContent(
            fac.AntdText(
                '最基础的悬浮按钮',
                style={'margin': '10px', 'fontSize': '16px', 'height': '100%'},
            ),
            style={'height': '49px', 'backgroundColor': '#F8F8F8', 'borderBottom': '1px solid #ECECEA',
                   'display': 'flex', 'alignItems': 'center'},
        ),
        fac.AntdFloatButton(
            style={'top': '115px', 'left': '260px'},
        ),

        # 不同类型的悬浮按钮
        fac.AntdContent(
            fac.AntdText(
                '不同类型的悬浮按钮',
                style={'margin': '10px', 'fontSize': '16px'},
            ),
            style={'height': '49px', 'backgroundColor': 'white', 'borderBottom': '1px solid #ECECEA',
                   'display': 'flex', 'alignItems': 'center'},
        ),
        fac.AntdFloatButton(
            style={'top': '165px', 'left': '260px'},
        ),
        fac.AntdFloatButton(
            style={'top': '165px', 'left': '310px'},
            type='primary',
        ),

        # 不同形状的悬浮按钮
        fac.AntdContent(
            fac.AntdText(
                '不同形状的悬浮按钮',
                style={'margin': '10px', 'fontSize': '16px'},
            ),
            style={'height': '49px', 'backgroundColor': '#F8F8F8', 'borderBottom': '1px solid #ECECEA',
                   'display': 'flex', 'alignItems': 'center'},
        ),
        fac.AntdFloatButton(
            style={'top': '215px', 'left': '260px'},
            type='primary',
        ),
        fac.AntdFloatButton(
            style={'top': '215px', 'left': '310px', 'width': '40px', 'height': '40px'},
            type='primary',
            shape='square',
        ),
        fac.AntdFloatButton(
            style={'top': '215px', 'left': '360px', 'height': '40px'},
            type='primary',
            shape='square',
        ),

        # 为悬浮按钮自定义图标元素
        fac.AntdContent(
            fac.AntdText(
                '为悬浮按钮自定义图标元素',
                style={'margin': '10px', 'fontSize': '16px'},
            ),
            style={'height': '49px', 'backgroundColor': 'white', 'borderBottom': '1px solid #ECECEA',
                   'display': 'flex', 'alignItems': 'center'},
        ),
        fac.AntdFloatButton(
            style={'top': '265px', 'left': '260px'},
            icon=fac.AntdIcon(icon='antd-question'),
        ),
        fac.AntdFloatButton(
            style={'top': '265px', 'left': '310px'},
            icon=fac.AntdIcon(icon='antd-bulb'),
            type='primary',
        ),

        # 为悬浮按钮添加额外描述信息
        fac.AntdContent(
            fac.AntdText(
                '为悬浮按钮添加额外描述信息',
                style={'margin': '10px', 'fontSize': '16px'},
            ),
            style={'height': '49px', 'backgroundColor': '#F8F8F8', 'borderBottom': '1px solid #ECECEA',
                   'display': 'flex', 'alignItems': 'center'},
        ),
        fac.AntdFloatButton(
            description='描述信息',
            style={'top': '315px', 'left': '260px'},
        ),
        fac.AntdFloatButton(
            description='描述信息',
            shape='square',
            style={'top': '315px', 'left': '310px', 'height': '40px'},
        ),
        fac.AntdFloatButton(
            description='测试',
            shape='square',
            type='primary',
            icon=fac.AntdIcon(icon='antd-question'),
            style={'top': '315px', 'left': '360px', 'height': '40px'},
        ),

        # 为悬浮按钮添加额外气泡卡片信息
        fac.AntdContent(
            fac.AntdText(
                '为悬浮按钮添加额外气泡卡片信息',
                style={'margin': '10px', 'fontSize': '16px'}
            ),
            style={'height': '49px', 'backgroundColor': 'white', 'borderBottom': '1px solid #ECECEA',
                   'display': 'flex', 'alignItems': 'center'},
        ),
        fac.AntdFloatButton(
            tooltip='气泡卡片信息',
            style={'top': '365px', 'left': '260px'},
        ),

        # 为悬浮按钮添加跳转链接
        fac.AntdContent(
            fac.AntdText(
                '为悬浮按钮添加跳转链接',
                style={'margin': '10px', 'fontSize': '16px'},
            ),
            style={'height': '49px', 'backgroundColor': '#F8F8F8', 'borderBottom': '1px solid #ECECEA',
                   'display': 'flex', 'alignItems': 'center'},
        ),
        fac.AntdFloatButton(
            href='/',
            target='_blank',
            style={'top': '415px', 'left': '260px'},
        ),

        # 为悬浮按钮添加点击事件
        fac.AntdContent(
            fac.AntdText(
                '为悬浮按钮添加点击事件',
                style={'margin': '10px', 'fontSize': '16px',
                       'display': 'flex', 'alignItems': 'center'},
            ),
        ),
        fac.AntdFloatButton(
            id='float-button-basic-event',
            description='点我',
            type='primary',
            style={'top': '465px', 'left': '260px'},
        ),
        fac.AntdContent(
            fac.AntdText(
                id='float-button-basic-event-output',
                style={'margin': '10px'}
            ),
            style={'height': '29px', 'backgroundColor': 'white', 'borderBottom': '1px solid #ECECEA',
                   'display': 'flex', 'alignItems': 'center'},
        ),

        # 悬浮按钮组演示
        fac.AntdContent(
            fac.AntdTitle(
                '悬浮按钮组演示：',
                level=4,
                style={'margin': '10px'},
            ),
            style={'height': '30px', 'display': 'flex', 'alignItems': 'center'}
        ),
        html.Div(
            fac.AntdSpace(
                [
                    fac.AntdContent(
                        fac.AntdText(
                            '最基础的悬浮按钮组',
                            style={'margin': '10px', 'fontSize': '16px',
                                   'display': 'flex', 'alignItems': 'center'},
                        ),
                    ),
                    fac.AntdContent(
                        fac.AntdText(
                            '触发菜单模式',
                            style={'margin': '10px', 'fontSize': '16px',
                                   'display': 'flex', 'alignItems': 'center'},
                        ),
                    ),
                    fac.AntdContent(
                        fac.AntdText(
                            '不同菜单的展开方向',
                            style={'margin': '10px', 'fontSize': '16px',
                                   'display': 'flex', 'alignItems': 'center'},
                        ),
                    ),
                    fac.AntdContent(
                        fac.AntdText(
                            '按钮组的回调监听',
                            style={'margin': '10px', 'fontSize': '16px',
                                   'display': 'flex', 'alignItems': 'center'},
                        ),
                    ),
                ],
                size='large',
            ),
        ),
        html.Div(
            fac.AntdSpace(
                [
                    fac.AntdContent(
                        fac.AntdText(
                            'hover',
                            style={'margin': '5px', 'fontSize': '16px'}
                        ),
                    ),
                    fac.AntdContent(
                        fac.AntdText(
                            'click',
                            style={'margin': '5px', 'fontSize': '16px'},
                        ),
                    ),
                    fac.AntdSegmented(
                        id='float-button-group-placement',
                        options=[
                            {'label': placement, 'value': placement} for placement in
                            ['top', 'right', 'left', 'bottom']
                        ],
                        value='top',
                        block=True,
                        size='small',
                    ),
                    fac.AntdText('Open Status:', id='float-button-group-basic-event-output'),
                ],
                size='large',
            ),
            style={'marginLeft': '180px'}
        ),
        html.Div(
            [
                fac.AntdFloatButtonGroup(
                    [
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-question')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-setting')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-mail')),
                    ],
                    style={'right': '95%', 'bottom': '3%'},
                ),
                fac.AntdFloatButtonGroup(
                    [
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-question')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-setting')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-mail')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-notification')),
                    ],
                    shape='square',
                    style={'right': '90%', 'bottom': '3%'},
                ),
                fac.AntdFloatButtonGroup(
                    [
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-question')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-setting')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-mail')),
                    ],
                    trigger='hover',
                    icon=fac.AntdIcon(icon='antd-menu'),
                    type='primary',
                    tooltip='trigger: hover',
                    style={'right': 'calc(85% - 30px)', 'bottom': '3%'},
                ),
                fac.AntdFloatButtonGroup(
                    [
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-question')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-setting')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-mail')),
                    ],
                    trigger='click',
                    icon=fac.AntdIcon(icon='antd-menu'),
                    type='primary',
                    tooltip='trigger: click',
                    style={'right': 'calc(78% - 10px)', 'bottom': '3%'},
                ),
                fac.AntdFloatButtonGroup(
                    [
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-question')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-setting')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-mail')),
                    ],
                    id='float-button-group-placement-demo',
                    trigger='click',
                    style={'right': 'calc(70% - 20px)', 'bottom': '15%'},
                    icon=fac.AntdIcon(icon='antd-menu'),
                    type='primary',
                ),
                fac.AntdFloatButtonGroup(
                    [
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-question')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-setting')),
                        fac.AntdFloatButton(icon=fac.AntdIcon(icon='antd-mail')),
                    ],
                    id='float-button-group-basic-event',
                    trigger='click',
                    style={'right': 'calc(55% - 20px)', 'bottom': '3%'},
                    icon=fac.AntdIcon(icon='antd-menu'),
                    type='primary',
                ),
            ],
        ),
    ],
)


# 悬浮按钮点击事件 回调函数
@app.callback(
    Output('float-button-basic-event-output', 'children'),
    Input('float-button-basic-event', 'nClicks'),
    prevent_initial_call=True,
)
def float_button_basic_event(nClicks):
    return f"nClicks: {nClicks}"


@app.callback(
    Output('float-button-group-placement-demo', 'placement'),
    Input('float-button-group-placement', 'value'),
)
def float_button_group_placement_demo(value):
    return value


@app.callback(
    Output('float-button-group-basic-event-output', 'children'),
    Input('float-button-group-basic-event', 'open'),
    prevent_initial_call=True,
)
def float_button_group_basic_event(open):
    return f'Open Status: {open}'


if __name__ == '__main__':
    app.run_server(debug=True)