【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, Stateapp = 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 [e-mail](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)