一、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)
