一、简单了解 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 fac
app = dash.Dash(__name__)
app.layout = html.Div([
fac.AntdTitle('您好! Dash', level=2),
fac.AntdDivider(lineColor='red', isDashed=True),
fac.AntdText('Dash 版本:%s' % dash.__version__,
underline=True),
fac.AntdDivider('分割线', lineColor='#6EAA82', isDashed=True,
fontColor='#4F78B0',
fontStyle='italic'
),
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" "lighter"
'fontStyle': 'italic' # "normal"
}),
fac.AntdDivider(lineColor='red', isDashed=True),
fac.AntdAlert(
message='Hello Dash!',
description=f'Dash 版本：{dash.__version__}, fac版本：{fac.__version__}',
type='info',
showIcon=True
),
])
if __name__ == '__main__':
app.run_server(debug=True)
输出：
三、代码解读
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', level=3), fac.AntdDivider(lineColor='red', isDashed=True), fac.AntdText('Dash 版本: %s' % dash.__version__, underline=True), fac.AntdDivider('分割线', lineColor='#6EAA82', isDashed=True, fontColor='#4F78B0', fontStyle='italic'), 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(lineColor='red', isDashed=True), fac.AntdAlert( message='Hello Dash!', description=f'Dash 版本：{dash.__version__}, fac版本：{fac.__version__}', type='info', showIcone=True ), ])
app.layout = html.Div([ ... ])
- 定义应用的布局，使用 html.Div 作为容器，放置多个子组件
fac.AntdTitle('您好! Dash', level=2),
- 创建一个标题组件 AntdTitle ，标题级别为2
fac.AntdDivider(lineColor='red', isDashed=True),
- 用 AntdDivider 创建一条分割线，设置为红色，虚线。
fac.AntdText('Dash 版本:%s' % dash.__version__, underline=True),
- 用 AntdText 创建文本组件，显示 Dash 版本信息，并添加下划线
fac.AntdDivider('分割线', lineColor='#6EAA82', isDashed=True, fontColor='#4F78B0', fontStyle='italic'),
- 再次创建分割线，设置不同颜色、文字、字体等。
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" "lighter" 'fontStyle': 'italic' # "normal" }),
- 创建 AntdText 文本组件，显示fac的版本信息
- 再创建一个 AntdText ，具有内联样式设置，包括位置、颜色、字体大小和粗细以及风格
fac.AntdDivider(lineColor='red', isDashed=True), fac.AntdAlert( message='Hello Dash!', description=f'Dash 版本：{dash.__version__}, fac版本：{fac.__version__}', type='info', showIcon=True ),
- 创建分割线，红色虚线
- 创建一个警告提示组件 AntdAlert，显示一条信息和描述，类型为“info”, 并显示图标
if __name__ == '__main__': app.run_server(debug=True)
- 判断是否是直接运行脚本，如是则启动 Dash 服务器
- 使用 debug 模式启动服务器，这样可以在开发过程中提供更多调试信息。
