【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)
相关推荐
杨超越luckly13 分钟前
基于地铁刷卡数据分析与可视化——以杭州市为例
大数据·python·阿里云·数据挖掘·数据分析
秋恬意15 分钟前
Java 反射机制详解
java·开发语言
黑不溜秋的17 分钟前
C++ 模板专题 - 标签分派(Tag Dispatching)
开发语言·c++·算法
skywind27 分钟前
为什么 C 语言数组是从 0 开始计数的？
c语言·开发语言·网络·c++
尘浮生44 分钟前
Java项目实战II基于Spring Boot的火锅店管理系统设计与实现（开发文档+数据库+源码）
java·开发语言·数据库·spring boot·后端·微信小程序·旅游
wrx繁星点点44 分钟前
桥接模式：解耦抽象与实现的利器
android·java·开发语言·jvm·spring cloud·intellij-idea·桥接模式
千里马-horse1 小时前
在OpenCL 中输出CLinfo信息
开发语言·c++·算法·opencl·1024程序员节
试行1 小时前
C#实现ClientWebSocket请求服务端，接收完所有返回值，解决接收数据不全
开发语言·c#
板子小哥1 小时前
LuatOS学习指南：开启物联网开发之旅
运维·服务器·开发语言·人工智能·物联网·junit·lua
热门推荐
01Windows10安装PCL1.14.0及点云配准02制冷毛细管的计算方法介绍03【经验分享】Ubuntu22.04安装微信(linux官方版)04ECharts 地图实战分析：实现一个完整的地图下钻功能05前端vue3实现本地及在线文件预览（含pdf/txt/mp3/mp4/docx/xlsx/pptx）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07红米手机使用google play08【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总09RAG 实践- Ollama+RagFlow 部署本地知识库10浏览器无法连接网络问题