搭建网站详细步骤,给钱做任务的网站,建筑木模板报价清单,如何能让企业做网站的打算一、feffery_antd_componenet 中的 AntdFloatButton 和 AntdFloatButtonGroup
AntdFloatButton 和 AntdFloatButtonGroup 是两个用于创建悬浮按钮和悬浮按钮组的组件。
AntdFloatButton 是单个悬浮按钮组件#xff0c;它提供了多种属性来定义按钮的外观及行为。AntdFloatBut…一、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,level2,style{color: white},),style{display: flex,justifyContent: center,alignItems: center, # 对齐方式},),# 悬浮按钮演示fac.AntdContent(fac.AntdTitle(悬浮按钮演示:,level4,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},typeprimary,),# 不同形状的悬浮按钮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},typeprimary,),fac.AntdFloatButton(style{top: 215px, left: 310px, width: 40px, height: 40px},typeprimary,shapesquare,),fac.AntdFloatButton(style{top: 215px, left: 360px, height: 40px},typeprimary,shapesquare,),# 为悬浮按钮自定义图标元素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},iconfac.AntdIcon(iconantd-question),),fac.AntdFloatButton(style{top: 265px, left: 310px},iconfac.AntdIcon(iconantd-bulb),typeprimary,),# 为悬浮按钮添加额外描述信息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描述信息,shapesquare,style{top: 315px, left: 310px, height: 40px},),fac.AntdFloatButton(description测试,shapesquare,typeprimary,iconfac.AntdIcon(iconantd-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(idfloat-button-basic-event,description点我,typeprimary,style{top: 465px, left: 260px},),fac.AntdContent(fac.AntdText(idfloat-button-basic-event-output,style{margin: 10px}),style{height: 29px, backgroundColor: white, borderBottom: 1px solid #ECECEA,display: flex, alignItems: center},),# 悬浮按钮组演示fac.AntdContent(fac.AntdTitle(悬浮按钮组演示,level4,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},),),],sizelarge,),),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(idfloat-button-group-placement,options[{label: placement, value: placement} for placement in[top, right, left, bottom]],valuetop,blockTrue,sizesmall,),fac.AntdText(Open Status:, idfloat-button-group-basic-event-output),],sizelarge,),style{marginLeft: 180px}),html.Div([fac.AntdFloatButtonGroup([fac.AntdFloatButton(iconfac.AntdIcon(iconantd-question)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-setting)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-mail)),],style{right: 95%, bottom: 3%},),fac.AntdFloatButtonGroup([fac.AntdFloatButton(iconfac.AntdIcon(iconantd-question)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-setting)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-mail)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-notification)),],shapesquare,style{right: 90%, bottom: 3%},),fac.AntdFloatButtonGroup([fac.AntdFloatButton(iconfac.AntdIcon(iconantd-question)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-setting)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-mail)),],triggerhover,iconfac.AntdIcon(iconantd-menu),typeprimary,tooltiptrigger: hover,style{right: calc(85% - 30px), bottom: 3%},),fac.AntdFloatButtonGroup([fac.AntdFloatButton(iconfac.AntdIcon(iconantd-question)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-setting)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-mail)),],triggerclick,iconfac.AntdIcon(iconantd-menu),typeprimary,tooltiptrigger: click,style{right: calc(78% - 10px), bottom: 3%},),fac.AntdFloatButtonGroup([fac.AntdFloatButton(iconfac.AntdIcon(iconantd-question)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-setting)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-mail)),],idfloat-button-group-placement-demo,triggerclick,style{right: calc(70% - 20px), bottom: 15%},iconfac.AntdIcon(iconantd-menu),typeprimary,),fac.AntdFloatButtonGroup([fac.AntdFloatButton(iconfac.AntdIcon(iconantd-question)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-setting)),fac.AntdFloatButton(iconfac.AntdIcon(iconantd-mail)),],idfloat-button-group-basic-event,triggerclick,style{right: calc(55% - 20px), bottom: 3%},iconfac.AntdIcon(iconantd-menu),typeprimary,),],),],
)# 悬浮按钮点击事件 回调函数
app.callback(Output(float-button-basic-event-output, children),Input(float-button-basic-event, nClicks),prevent_initial_callTrue,
)
def float_button_basic_event(nClicks):return fnClicks: {nClicks}app.callback(Output(float-button-group-placement-demo, placement),Input(float-button-group-placement, value),
)
def float_button_group_placement_demo(value):return valueapp.callback(Output(float-button-group-basic-event-output, children),Input(float-button-group-basic-event, open),prevent_initial_callTrue,
)
def float_button_group_basic_event(open):return fOpen Status: {open}if __name__ __main__:app.run_server(debugTrue)
