【Dash】feffery_antd_components 简单入门示例

一、简单了解 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', 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”, 并显示图标