【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)
相关推荐
宅小海8 分钟前
scala String
大数据·开发语言·scala
小喵要摸鱼10 分钟前
Python 神经网络项目常用语法
python
qq_3273427310 分钟前
Java实现离线身份证号码OCR识别
java·开发语言
锅包肉的九珍11 分钟前
Scala的Array数组
开发语言·后端·scala
心仪悦悦14 分钟前
Scala的Array（2）
开发语言·后端·scala
yqcoder37 分钟前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
baivfhpwxf20231 小时前
C# 5000 转16进制 字节(激光器串口通讯生成指定格式命令)
开发语言·c#
许嵩661 小时前
IC脚本之perl
开发语言·perl
长亭外的少年1 小时前
Kotlin 编译失败问题及解决方案：从守护进程到 Gradle 配置
android·开发语言·kotlin
直裾1 小时前
Scala全文单词统计
开发语言·c#·scala
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06RAG 实践- Ollama+RagFlow 部署本地知识库07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10【目标跟踪】相机运动补偿