Ejemplo n.º 1
0
                               'fontSize': '1.2rem'
                           }),
                 style={'marginBottom': '10px'}),
        html.Div(
            [
                fac.AntdPageHeader(title='页头标题示例', subTitle='页头副标题示例'),
                fac.AntdDivider(
                    '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
                fac.AntdParagraph(
                    [fac.AntdText('  最基础的页头包含了自带浏览器后退功能的返回按钮、主标题及副标题信息')]),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdPageHeader(
    title='页头标题示例',
    subTitle='页头副标题示例'
)
'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
            ],
            style={
                'marginBottom': '40px',
                'padding': '10px 10px 20px 10px',
                'border': '1px solid #f0f0f0'
            },
            id='基础使用',
Ejemplo n.º 2
0
                            ]
                        ),

                        fac.AntdDivider(
                            '基础使用',
                            lineColor='#f0f0f0',
                            innerTextOrientation='left'
                        ),

                        fac.AntdCollapse(
                            fuc.FefferySyntaxHighlighter(
                                showLineNumbers=True,
                                showInlineLineNumbers=True,
                                language='python',
                                codeStyle='coy-without-shadows',
                                codeString='''
html.Div(
    [
        fac.AntdAlert(message='这是一条alert测试')
    ]
)'''
                            ),
                            title='点击查看代码',
                            is_open=False,
                            ghost=True
                        )
                    ],
                    style={
                        'marginBottom': '40px',
                        'padding': '10px 10px 20px 10px',
                        'border': '1px solid #f0f0f0'
                    },
Ejemplo n.º 3
0
                               'padding': '3px 0 3px 10px',
                               'backgroundColor': '#f5f5f5',
                               'fontWeight': 'bold',
                               'fontSize': '1.2rem'
                           }),
                 style={'marginBottom': '10px'}),
        html.Div(
            [
                fac.AntdResult(title='结果页示例', subTitle='这是一段结果页示例文字说明'),
                fac.AntdDivider(
                    '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdResult(
    title='结果页示例',
    subTitle='这是一段结果页示例文字说明'
)'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
            ],
            style={
                'marginBottom': '40px',
                'padding': '10px 10px 20px 10px',
                'border': '1px solid #f0f0f0'
            },
            id='基础使用',
            className='div-highlight'),
Ejemplo n.º 4
0
                    fac.AntdText('app.layout', strong=True),
                    fac.AntdText('中进行定义,推荐的使用方式是预先定义容纳它的容器,'
                                 '后续回调中直接将'),
                    fac.AntdText('fac.AntdNotification(...)', italic=True),
                    fac.AntdText('对象作为回调输出返回对应容器即可,譬如本例中由按钮触发通知提示框的弹出显示')
                ]),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdButton('触发通知提示框', id='notification-trigger-button-demo1', type='primary'),
html.Div(id='notification-container-demo1')
...
@app.callback(
    Output('notification-container-demo1', 'children'),
    Input('notification-trigger-button-demo1', 'nClicks'),
    prevent_initial_call=True
)
def notification_demo1(nClicks):
    return fac.AntdNotification(
        message='通知提示框测试',
        description='这是一段辅助说明文字内容'
    )'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
            ],
            style={
                'marginBottom': '40px',
Ejemplo n.º 5
0
                ]),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdPopover(
    fac.AntdButton(
        '请将鼠标悬浮于此',
        type='primary'
    ),
    title='这是一段AntdTooltip提示示例',
    content=[
        fac.AntdParagraph(
            [
                fac.AntdText('  配合'),
                fac.AntdText('AntdPopover', strong=True),
                fac.AntdText('的'),
                fac.AntdText('content', code=True),
                fac.AntdText('参数,可实现比'),
                fac.AntdText('AntdTooltip', strong=True),
                fac.AntdText('更加丰富自由的提示框内容渲染')
            ]
        )
    ],
    overlayStyle={
        'width': '350px'
    }
)'''),
                                 title='点击查看代码',
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdDivider('默认无边框', innerTextOrientation='left'),
fac.AntdDescriptions(
    [
        fac.AntdDescriptionItem(
            '费弗里',
            label='姓名'
        ),
        fac.AntdDescriptionItem(
            html.A(
                'https://github.com/CNFeffery',
                href='https://github.com/CNFeffery'
            ),
            label='个人Github地址'
        ),
        fac.AntdDescriptionItem(
            html.A(
                'https://www.cnblogs.com/feffery/',
                href='https://www.cnblogs.com/feffery/'
            ),
            label='个人博客地址'
        ),
        fac.AntdDescriptionItem(
            html.A(
                'http://fac.feffery.tech/',
                href='http://fac.feffery.tech/'
            ),
            label='fac框架官网'
        )
    ],
    title='描述列表示例',
    labelStyle={
        'fontWeight': 'bold'
    }
),
fac.AntdDivider('添加边框', innerTextOrientation='left'),
fac.AntdDescriptions(
    [
        fac.AntdDescriptionItem(
            '费弗里',
            label='姓名'
        ),
        fac.AntdDescriptionItem(
            html.A(
                'https://github.com/CNFeffery',
                href='https://github.com/CNFeffery'
            ),
            label='个人Github地址'
        ),
        fac.AntdDescriptionItem(
            html.A(
                'https://www.cnblogs.com/feffery/',
                href='https://www.cnblogs.com/feffery/'
            ),
            label='个人博客地址'
        ),
        fac.AntdDescriptionItem(
            html.A(
                'http://fac.feffery.tech/',
                href='http://fac.feffery.tech/'
            ),
            label='fac框架官网'
        )
    ],
    title='描述列表示例',
    bordered=True,
    labelStyle={
        'fontWeight': 'bold'
    }
)
'''),
Ejemplo n.º 7
0
                        ),

                        fac.AntdCollapse(
                            fuc.FefferySyntaxHighlighter(
                                showLineNumbers=True,
                                showInlineLineNumbers=True,
                                language='python',
                                codeStyle='coy-without-shadows',
                                codeString='''
fac.AntdButton('触发2秒加载动画', id='spin-basic-demo-input', type='primary'),

fac.AntdSpin(
    fac.AntdText('nClicks: 0', id='spin-basic-demo-output', strong=True),
    text='回调中'
)
...
@app.callback(
    Output('spin-basic-demo-output', 'children'),
    Input('spin-basic-demo-input', 'nClicks'),
    prevent_initial_call=True
)
def spin_basic_callback_demo(nClicks):
    import time
    time.sleep(2)

    return f'nClicks: {nClicks}'
'''
                            ),
                            title='点击查看代码',
                            is_open=False,
                            ghost=True
Ejemplo n.º 8
0
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdSpace(
    [
        fac.AntdRibbon(
            html.Div(
                style={
                    'height': '200px',
                    'width': '300px',
                    'borderRadius': '16px',
                    'boxShadow': 'rgb(102 124 145 / 9%) 0px 2px 6px 0px'
                }
            ),
            text='缎带示例'
        ),
        fac.AntdRibbon(
            html.Div(
                style={
                    'height': '200px',
                    'width': '300px',
                    'borderRadius': '16px',
                    'boxShadow': 'rgb(102 124 145 / 9%) 0px 2px 6px 0px'
                }
            ),
            text='缎带示例',
            placement='start',
            color='#ff4d4f'
        )
    ],
    direction='vertical'
)
'''),
Ejemplo n.º 9
0
                                       'backgroundColor': '#f5f5f5',
                                       'fontWeight': 'bold',
                                       'fontSize': '1.2rem'
                                   }),
                         style={'marginBottom': '10px'}),
                html.Div(
                    [
                        fac.AntdDivider(),
                        fac.AntdDivider(isDashed=True),
                        fac.AntdDivider('常规的实线与虚线分割线',
                                        lineColor='#f0f0f0',
                                        innerTextOrientation='left'),
                        fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                            showLineNumbers=True,
                            showInlineLineNumbers=True,
                            language='python',
                            codeStyle='coy-without-shadows',
                            codeString='''
fac.AntdDivider(),
fac.AntdDivider(isDashed=True)'''),
                                         title='点击查看代码',
                                         is_open=False,
                                         ghost=True)
                    ],
                    style={
                        'marginBottom': '40px',
                        'padding': '10px 10px 20px 10px',
                        'border': '1px solid #f0f0f0'
                    },
                    id='常规的实线与虚线分割线',
                    className='div-highlight'),
                html.Div(
Ejemplo n.º 10
0
                    fac.AntdText('"@"', code=True),
                    fac.AntdText('),即可选择需要在此处提及的对象进行插入')
                ]),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdMentions(
    options=[
        {
            'label': '费弗里',
            'value': '费弗里'
        },
        {
            'label': '小A',
            'value': '小A'
        },
        {
            'label': 'liz',
            'value': 'liz'
        }
    ],
    style={
        'width': '400px'
    }
)
'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
Ejemplo n.º 11
0
                           }),
                 style={'marginBottom': '10px'}),
        html.Div(
            [
                fac.AntdTitle('整星选择:', level=5),
                fac.AntdRate(count=10),
                fac.AntdTitle('半星选择:', level=5),
                fac.AntdRate(count=10, allowHalf=True),
                fac.AntdDivider(
                    '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdTitle('整星选择:', level=5),
fac.AntdRate(count=10),
fac.AntdTitle('半星选择:', level=5),
fac.AntdRate(count=10, allowHalf=True)
'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
            ],
            style={
                'marginBottom': '40px',
                'padding': '10px 10px 20px 10px',
                'border': '1px solid #f0f0f0'
            },
            id='基础使用',
Ejemplo n.º 12
0
                            buttonContent='点击上传图片'
                        ),

                        fac.AntdDivider(
                            '基础使用及单文件大小限制',
                            lineColor='#f0f0f0',
                            innerTextOrientation='left'
                        ),

                        fac.AntdCollapse(
                            fuc.FefferySyntaxHighlighter(
                                showLineNumbers=True,
                                showInlineLineNumbers=True,
                                language='python',
                                codeStyle='coy-without-shadows',
                                codeString='''
fac.AntdPictureUpload(
    apiUrl='/upload/',
    fileMaxSize=1
)'''
                            ),
                            title='点击查看代码',
                            is_open=False,
                            ghost=True
                        )

                    ],
                    style={
                        'marginBottom': '40px',
                        'padding': '10px 10px 20px 10px',
                        'border': '1px solid #f0f0f0'
Ejemplo n.º 13
0
                    fac.AntdButton('primary', type='primary'),
                    fac.AntdButton('dashed', type='dashed'),
                    fac.AntdButton('link', type='link'),
                    fac.AntdButton('text', type='text')
                ]),
                fac.AntdDivider('不同type对应按钮样式风格',
                                lineColor='#f0f0f0',
                                innerTextOrientation='left'),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
html.Div(
    [
        fac.AntdButton('default'),
        fac.AntdButton('primary', type='primary'),
        fac.AntdButton('dashed', type='dashed'),
        fac.AntdButton('link', type='link'),
        fac.AntdButton('text', type='text')
    ]
)'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
            ],
            style={
                'marginBottom': '40px',
                'padding': '10px 10px 20px 10px',
                'border': '1px solid #f0f0f0'
Ejemplo n.º 14
0
                    'content': '模型发布'
                }]),
                fac.AntdDivider(
                    '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdTimeline(
    items=[
        {
            'content': '训练数据导入'
        },
        {
            'content': '模型训练'
        },
        {
            'content': '模型持久化'
        },
        {
            'content': '模型发布'
        }
    ]
)
'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
            ],
Ejemplo n.º 15
0
                            fuc.FefferySyntaxHighlighter(
                                showLineNumbers=True,
                                showInlineLineNumbers=True,
                                language='python',
                                codeStyle='coy-without-shadows',
                                codeString='''
fac.AntdTabs(
    [
        fac.AntdTabPane(
            html.Div(
                '标签页1测试',
                style={
                    'backgroundColor': 'rgba(241, 241, 241, 0.4)',
                    'height': '200px',
                    'display': 'flex',
                    'justifyContent': 'center',
                    'alignItems': 'center'
                }
            ),
            tab='标签页1',
            key='标签页1'
        ),
        fac.AntdTabPane(
            html.Div(
                fac.AntdButton('标签页2测试', type='primary'),
                style={
                    'backgroundColor': 'rgba(241, 241, 241, 0.4)',
                    'height': '200px',
                    'display': 'flex',
                    'justifyContent': 'center',
                    'alignItems': 'center'
                }
            ),
            tab='标签页2',
            key='标签页2'
        ),
        fac.AntdTabPane(
            html.Div(
                fac.AntdButton('标签页3测试', type='dashed'),
                style={
                    'backgroundColor': 'rgba(241, 241, 241, 0.4)',
                    'height': '200px',
                    'display': 'flex',
                    'justifyContent': 'center',
                    'alignItems': 'center'
                }
            ),
            tab='标签页3',
            key='标签页3'
        )
    ]
)'''
                            ),
Ejemplo n.º 16
0
                    style={
                        'borderLeft': '4px solid grey',
                        'padding': '3px 0 3px 10px',
                        'backgroundColor': '#f5f5f5',
                        'fontWeight': 'bold',
                        'fontSize': '1.2rem'
                    }),
          style={'marginBottom': '10px'}),
 html.Div(
     [
         fac.AntdSwitch(),
         fac.AntdDivider(
             '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
         fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
             showLineNumbers=True,
             showInlineLineNumbers=True,
             language='python',
             codeStyle='coy-without-shadows',
             codeString='''fac.AntdSwitch()'''),
                          title='点击查看代码',
                          is_open=False,
                          ghost=True)
     ],
     style={
         'marginBottom': '40px',
         'padding': '10px 10px 20px 10px',
         'border': '1px solid #f0f0f0'
     },
     id='基础使用',
     className='div-highlight'),
 html.Div(
     [
Ejemplo n.º 17
0
                                fac.AntdText('fac.AntdMessage(...)', italic=True),
                                fac.AntdText('对象作为回调输出返回对应容器即可,譬如本例中由按钮触发通知提示框的弹出显示')
                            ]
                        ),

                        fac.AntdCollapse(
                            fuc.FefferySyntaxHighlighter(
                                showLineNumbers=True,
                                showInlineLineNumbers=True,
                                language='python',
                                codeStyle='coy-without-shadows',
                                codeString='''
fac.AntdButton('触发全局提示框', id='message-trigger-button-demo1', type='primary'),
html.Div(id='message-container-demo1')
...
@app.callback(
    Output('message-container-demo1', 'children'),
    Input('message-trigger-button-demo1', 'nClicks'),
    prevent_initial_call=True
)
def message_demo1(nClicks):
    return fac.AntdMessage(
        content='全局提示框示例'
    )'''
                            ),
                            title='点击查看代码',
                            is_open=False,
                            ghost=True
                        )

                    ],
Ejemplo n.º 18
0
                               'fontSize': '1.2rem'
                           }),
                 style={'marginBottom': '10px'}),
        html.Div(
            [
                fac.AntdCountdown(title='倒计时示例',
                                  value='2099-12-31 00:00:00',
                                  format='还剩Y年M月D天H小时m分s秒'),
                fac.AntdDivider(
                    '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdCountdown(
    title='倒计时示例',
    value='2099-12-31 00:00:00',
    format='还剩Y年M月D天H小时m分s秒'
)
'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
            ],
            style={
                'marginBottom': '40px',
                'padding': '10px 10px 20px 10px',
                'border': '1px solid #f0f0f0'
            },
            id='基础使用',
                               'padding': '3px 0 3px 10px',
                               'backgroundColor': '#f5f5f5',
                               'fontWeight': 'bold',
                               'fontSize': '1.2rem'
                           }),
                 style={'marginBottom': '10px'}),
        html.Div(
            [
                fac.AntdTimeRangePicker(allowClear=True),
                fac.AntdDivider(
                    '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdTimeRangePicker(
    allowClear=True
)
'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
            ],
            style={
                'marginBottom': '40px',
                'padding': '10px 10px 20px 10px',
                'border': '1px solid #f0f0f0'
            },
            id='基础使用',
            className='div-highlight'),
Ejemplo n.º 20
0
        html.Div(
            [
                fac.AntdDivider('size="default"(默认)',
                                innerTextOrientation='left'),
                fac.AntdCalendar(),
                fac.AntdDivider('size="large"', innerTextOrientation='left'),
                fac.AntdCalendar(size='large'),
                fac.AntdDivider(
                    '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdDivider('size="default"(默认)', innerTextOrientation='left'),
fac.AntdCalendar(),
fac.AntdDivider('size="large"', innerTextOrientation='left'),
fac.AntdCalendar(
    size='large'
)
'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
            ],
            style={
                'marginBottom': '40px',
                'padding': '10px 10px 20px 10px',
                'border': '1px solid #f0f0f0'
            },
Ejemplo n.º 21
0
                            fuc.FefferySyntaxHighlighter(
                                showLineNumbers=True,
                                showInlineLineNumbers=True,
                                language='python',
                                codeStyle='coy-without-shadows',
                                codeString='''
fac.AntdWatermark(
    html.Div(
        style={
            'height': '500px',
            'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
            'marginBottom': '25px'
        }
    ),
    content='水印内容测试',
    fontSize=28
),

fac.AntdWatermark(
    html.Div(
        fac.AntdForm(
            [
                fac.AntdFormItem(
                    fac.AntdInput(
                        autoComplete='off'
                    ),
                    label='用户名'
                ),
                fac.AntdFormItem(
                    fac.AntdInput(
                        mode='password'
                    ),
                    label='密码'
                ),
                fac.AntdFormItem(
                    fac.AntdCheckbox(
                        label='记住密码'
                    ),
                    wrapperCol={
                        'offset': 4
                    }
                ),
                fac.AntdFormItem(
                    fac.AntdButton(
                        '登录',
                        type='primary'
                    ),
                    wrapperCol={
                        'offset': 4
                    }
                )
            ],
            labelCol={
                'span': 4
            },
            wrapperCol={
                'span': 8
            }
        ),
        style={
            'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
            'padding': '25px'
        }
    ),
    content='水印内容测试',
    fontSize=22,
    rotate=22,
    gapX=50,
    gapY=50
)'''
                            ),
Ejemplo n.º 22
0
                                                      type='primary'),
                                       offsetTop=100),
                         style={'marginBottom': '1000px'}),
                fac.AntdDivider('下滑固钉示例',
                                lineColor='#f0f0f0',
                                innerTextOrientation='left'),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
html.Div(
    fac.AntdAffix(
        fac.AntdButton(
            '向下滑动页面体验固钉效果',
            type='primary'
        ),
        offsetTop=100
    ),
    style={
        'marginBottom': '1000px'
    }
)
'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
            ],
            style={
                'marginBottom': '40px',
Ejemplo n.º 23
0
                        fac.AntdDivider(
                            '基础使用',
                            lineColor='#f0f0f0',
                            innerTextOrientation='left'
                        ),

                        fac.AntdCollapse(
                            fuc.FefferySyntaxHighlighter(
                                showLineNumbers=True,
                                showInlineLineNumbers=True,
                                language='python',
                                codeStyle='coy-without-shadows',
                                codeString='''
fac.AntdSegmented(
    options=[
        {
            'label': f'选项{i}',
            'value': f'选项{i}'
        }
        for i in range(5)
    ],
    defaultValue='选项1'
)'''
                            ),
                            title='点击查看代码',
                            is_open=False,
                            ghost=True
                        )

                    ],
                    style={
Ejemplo n.º 24
0
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdInput(
    size='small',
    placeholder='基础的输入框',
    style={
        'width': '200px',
        'marginBottom': '5px'
    }
),
html.Br(),
fac.AntdInput(
    size='middle',
    placeholder='基础的输入框',
    style={
        'width': '200px',
        'marginBottom': '5px'
    }
),
html.Br(),
fac.AntdInput(
    size='large',
    placeholder='基础的输入框',
    style={
        'width': '200px',
        'marginBottom': '5px'
    }
)'''),
Ejemplo n.º 25
0
                fac.AntdCheckCardGroup([
                    fac.AntdCheckCard(fac.AntdStatistic(title='统计数值示例',
                                                        value=1332971),
                                      value=f'option{i}') for i in range(4)
                ]),
                fac.AntdDivider(
                    '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdCheckCardGroup(
    [
        fac.AntdCheckCard(
            fac.AntdStatistic(
                title='统计数值示例',
                value=1332971
            ),
            value=f'option{i}'
        )
        for i in range(4)
    ]
)'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
            ],
            style={
                'marginBottom': '40px',
                'padding': '10px 10px 20px 10px',
                        'borderLeft': '4px solid grey',
                        'padding': '3px 0 3px 10px',
                        'backgroundColor': '#f5f5f5',
                        'fontWeight': 'bold',
                        'fontSize': '1.2rem'
                    }),
          style={'marginBottom': '10px'}),
 html.Div(
     [
         fac.AntdDateRangePicker(),
         fac.AntdDivider('基础的日期范围选择控件',
                         lineColor='#f0f0f0',
                         innerTextOrientation='left'),
         fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
             showLineNumbers=True,
             showInlineLineNumbers=True,
             language='python',
             codeStyle='coy-without-shadows',
             codeString='''fac.AntdDateRangePicker()'''),
                          title='点击查看代码',
                          is_open=False,
                          ghost=True)
     ],
     style={
         'marginBottom': '40px',
         'padding': '10px 10px 20px 10px',
         'border': '1px solid #f0f0f0'
     },
     id='基础的日期范围选择控件',
     className='div-highlight'),
 html.Div(
     [
Ejemplo n.º 27
0
                            lineColor='#f0f0f0',
                            innerTextOrientation='left'
                        ),

                        fac.AntdCollapse(
                            fuc.FefferySyntaxHighlighter(
                                showLineNumbers=True,
                                showInlineLineNumbers=True,
                                language='python',
                                codeStyle='coy-without-shadows',
                                codeString='''
fac.AntdSelect(
    placeholder='请选择国家:',
    options=[
        {'label': '中国', 'value': '中国'},
        {'label': '美国', 'value': '美国'},
        {'label': '俄罗斯', 'value': '俄罗斯'},
        {'label': '德国', 'value': '德国', 'disabled': True},
        {'label': '加拿大', 'value': '加拿大'}
    ],
    style={
        # 使用css样式固定宽度
        'width': '200px'
    }
)'''
                            ),
                            title='点击查看代码',
                            is_open=False,
                            ghost=True
                        )
Ejemplo n.º 28
0
                 style={'marginBottom': '10px'}),
        html.Div(
            [
                fac.AntdDraggerUpload(apiUrl='/upload/',
                                      fileMaxSize=1,
                                      text='拖拽上传示例',
                                      hint='点击或拖拽文件至此处进行上传'),
                fac.AntdDivider('基础使用及单文件大小限制',
                                lineColor='#f0f0f0',
                                innerTextOrientation='left'),
                fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
                    showLineNumbers=True,
                    showInlineLineNumbers=True,
                    language='python',
                    codeStyle='coy-without-shadows',
                    codeString='''
fac.AntdDraggerUpload(
    apiUrl='/upload/',
    fileMaxSize=1,
    text='拖拽上传示例',
    hint='点击或拖拽文件至此处进行上传'
)'''),
                                 title='点击查看代码',
                                 is_open=False,
                                 ghost=True)
            ],
            style={
                'marginBottom': '40px',
                'padding': '10px 10px 20px 10px',
                'border': '1px solid #f0f0f0'
            },
            id='基础使用及单文件大小限制',
Ejemplo n.º 29
0
                            fuc.FefferySyntaxHighlighter(
                                showLineNumbers=True,
                                showInlineLineNumbers=True,
                                language='python',
                                codeStyle='coy-without-shadows',
                                codeString='''
fac.AntdTree(
    treeData=[
        {
            'title': '重庆市',
            'key': '重庆市',
            'children': [
                {
                    'title': '渝北区',
                    'key': '渝北区'
                },
                {
                    'title': '江北区',
                    'key': '江北区',
                    'disabled': True
                }
            ]
        },
        {
            'title': '北京市',
            'key': '北京市',
            'children': [
                {
                    'title': '西城区',
                    'key': '西城区'
                },
                {
                    'title': '东城区',
                    'key': '东城区'
                }
            ]
        },
        {
            'title': '四川省',
            'key': '四川省',
            'children': [
                {
                    'title': '成都市',
                    'key': '成都市',
                    'children': [
                        {
                            'title': '天府新区',
                            'key': '天府新区'
                        }
                    ]
                }
            ]
        }
    ]
)'''
                            ),
Ejemplo n.º 30
0
                            fuc.FefferySyntaxHighlighter(
                                showLineNumbers=True,
                                showInlineLineNumbers=True,
                                language='python',
                                codeStyle='coy-without-shadows',
                                codeString='''
html.Div(
    [
        fac.AntdAnchor(
            linkDict=[
                {'title': '示例2-1', 'href': '#示例2-1'},
                {'title': '示例2-1-1', 'href': '#示例2-1-1'},
                {'title': '示例2-1-2', 'href': '#示例2-1-2'},
                {'title': '示例2-2', 'href': '#示例2-2'},
            ],
            align='right',
            containerId='anchor-container-demo',
            targetOffset=100
        ),
        html.Div(
            [
                html.H5('示例2-1', id='示例2-1', style={'marginBottom': '800px'}),
                html.H5('示例2-1-1', id='示例2-1-1', style={'marginBottom': '800px'}),
                html.H5('示例2-1-2', id='示例2-1-2', style={'marginBottom': '800px'}),
                html.H5('示例2-2', id='示例2-2', style={'marginBottom': '800px'}),
            ]
        )
    ],
    id='anchor-container-demo',
    style={
        'maxHeight': '500px',
        'overflowY': 'auto',
        'position': 'relative',
        'backgroundColor': 'rgba(240, 240, 240, 0.2)',
        'padding': '20px'
    }
)'''
                            ),