网站如何用微信支付,分类网站开发,宠物网站设计说明书,官网模板源码一、简单了解 feffery_antd_components
简称 fac #xff0c;是一个基于 Ant Design 的 Dash 第三方组件#xff0c;由Feffery 老师开源维护的 Python 网页开发组件库#xff0c;它具有丰富的页面常用交互组件功能#xff0c;使开发者可以使用纯Python的方式快速构建现代…一、简单了解 feffery_antd_components
简称 fac 是一个基于 Ant Design 的 Dash 第三方组件由Feffery 老师开源维护的 Python 网页开发组件库它具有丰富的页面常用交互组件功能使开发者可以使用纯Python的方式快速构建现代化的交互式Web应用。fac组件底层与Dash框架紧密结合提供了包括通用、布局、导航、数据录入、数据展示、反馈等七大类功能拥有多达109个组件覆盖了各种常用应用功能需求。
fac 组件库主要特点包括
1、丰富的组件类型提供超过100个组件满足不同开发需求
2、简洁的Python接口降低学习成本
3、遵循 Ant Design 设计规范
4、支持多语言可设置不同的语言环境
5、支持静态资源通过 CDN 加载加速应用访问速度
6、减少应用初始加载时间按需加载资源
7、利用批量属性监听提升回调函数编排效率简化代码
二、简单入门代码
import dash
from dash import html
import feffery_antd_components as facapp dash.Dash(__name__)app.layout html.Div([fac.AntdTitle(您好! Dash, level2),fac.AntdDivider(lineColorred, isDashedTrue),fac.AntdText(Dash 版本:%s % dash.__version__,underlineTrue),fac.AntdDivider(分割线, lineColor#6EAA82, isDashedTrue,fontColor#4F78B0,fontStyleitalic),fac.AntdText(fac版本%s % fac.__version__),fac.AntdText(Hello, here is Garcia.,style{position: fixed,# top: 40%,left: 50%,color: #907DAC,fontSize: 30px,fontWeight: bold, # normal bold bolder lighterfontStyle: italic # normal}),fac.AntdDivider(lineColorred, isDashedTrue),fac.AntdAlert(messageHello Dash!,descriptionfDash 版本{dash.__version__}, fac版本{fac.__version__},typeinfo,showIconTrue),
])if __name__ __main__:app.run_server(debugTrue)
输出 三、代码解读 import dash
from dash import html
import feffery_antd_components as fac 导入 Dash 库Dash 是一个用于构建 Web 应用的 Python 框架从 dash 库中导入 html 模块该模块提供了创建 HTML 元素的类导入 feffery_antd_components 库并将其重命名为 fac 以便在代码中简化引用 app dash.Dash(__name__) 创建 Dash 应用实例使用魔术变量 __name__ 作为应用的名称 app.layout html.Div([fac.AntdTitle(您好! Dash, level3),fac.AntdDivider(lineColorred, isDashedTrue),fac.AntdText(Dash 版本: %s % dash.__version__, underlineTrue),fac.AntdDivider(分割线, lineColor#6EAA82, isDashedTrue,fontColor#4F78B0,fontStyleitalic),fac.AntdText(fac 版本%s % fac.__version__),fac.AntdText(Hello, here is Garcia.,style{position: fixed,left: 50%,color: #907DAC,fontSize: 30px,fontWeight: bold,fontStyle: italic}),fac.AntdDivider(lineColorred, isDashedTrue),fac.AntdAlert(messageHello Dash!,descriptionfDash 版本{dash.__version__}, fac版本{fac.__version__},typeinfo,showIconeTrue),
]) app.layout html.Div([ ... ]) 定义应用的布局使用 html.Div 作为容器放置多个子组件 fac.AntdTitle(您好! Dash, level2), 创建一个标题组件 AntdTitle 标题级别为2 fac.AntdDivider(lineColorred, isDashedTrue), 用 AntdDivider 创建一条分割线设置为红色虚线。 fac.AntdText(Dash 版本:%s % dash.__version__, underlineTrue), 用 AntdText 创建文本组件显示 Dash 版本信息并添加下划线 fac.AntdDivider(分割线, lineColor#6EAA82, isDashedTrue,fontColor#4F78B0,fontStyleitalic), 再次创建分割线设置不同颜色、文字、字体等。 fac.AntdText(fac版本%s % fac.__version__),
fac.AntdText(Hello, here is Garcia.,style{position: fixed,# top: 40%,left: 50%,color: #907DAC,fontSize: 30px,fontWeight: bold, # normal bold bolder lighterfontStyle: italic # normal}), 创建 AntdText 文本组件显示fac的版本信息再创建一个 AntdText 具有内联样式设置包括位置、颜色、字体大小和粗细以及风格 fac.AntdDivider(lineColorred, isDashedTrue),
fac.AntdAlert(messageHello Dash!,descriptionfDash 版本{dash.__version__}, fac版本{fac.__version__},typeinfo,showIconTrue
),创建分割线红色虚线创建一个警告提示组件 AntdAlert显示一条信息和描述类型为“info”, 并显示图标 if __name__ __main__:app.run_server(debugTrue)判断是否是直接运行脚本如是则启动 Dash 服务器使用 debug 模式启动服务器这样可以在开发过程中提供更多调试信息。
