【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 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 模式启动服务器，这样可以在开发过程中提供更多调试信息。