【Dash】feffery_antd_components 按钮组件的应用

Garcia Shan2024-10-22 13:06

一、feffery_antd_componenet 中的 AntdFloatButton 和 AntdFloatButtonGroup

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

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

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

二、代码

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

python 复制代码 
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)
相关推荐
昵称画6 小时前
交接班记录电子化：三班之间的信息不漏
开发语言·数据库·人工智能·低代码·php
“AI国潮设计-小江”7 小时前
【AIGC实战】Python+SDXL批量生成“潮汕英歌舞不倒翁”IP | 角色一致性与多场景融合方案，附完整代码
开发语言·人工智能·python·prompt·aigc
传奇开心果编程7 小时前
【Rust入门练中学】第6课：结构体与方法
开发语言·rust·结构体·编程语言理论·结构体方法·编程通用语言
Linux_cy7 小时前
服务器管理工具哪个好用？我用了七八个
运维·服务器·javascript·python·ssh·面板·gmssh
MoRanzhi12037 小时前
第6篇（下）· 使用 PyQt5 实现 2048 高性能计算版：统一运行控制与跨模式安全交接
python·pyqt·进程管理·状态机·软件架构·并发控制·数据一致性
code tsunami7 小时前
【无标题】
开发语言·python
CodeGL7 小时前
10、Python基础之进程和线程
开发语言·python
TechWayfarer9 小时前
PHP漏洞被利用，怎么揪出攻击IP？
开发语言·python·tcp/ip·网络安全·php
2601_967980119 小时前
Python列表操作方法详解
python·数据类型·修改·列表操作·功能汇总
卡卡～～10 小时前
“101计划”核心课程实践教材《数据实验结构指导-C++语言版》题目集
开发语言·c++·学习·算法
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF05几个好用的ip纯净度检测网站06ai安全工具:CyberStrikeAI安装部署与使用07苹果iPA游戏软件资源下载网站08昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战09乙二醇水溶液物性参数10「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会