}), fmc.FefferyMarkdown(markdownStr=open('documents/AntdAffix.md', encoding='utf-8').read()), html.Div(html.Span('使用示例', id='使用示例', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ html.Div(fac.AntdAffix(fac.AntdButton('向下滑动页面体验固钉效果', 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( '向下滑动页面体验固钉效果',
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={
fmc.FefferyMarkdown(markdownStr=open('documents/AntdButton.md', encoding='utf-8').read()), html.Div(html.Span('使用示例', id='使用示例', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ 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') ]), 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.AntdMentions(id='mentions-demo', placement='top', autoSize=True, options=[{ 'label': '费弗里', 'value': '费弗里' }, { 'label': '小A', 'value': '小A' }, { 'label': 'liz', 'value': 'liz' }], style={'width': '400px'}), fac.AntdButton('提交', id='mentions-submit', type='primary'), fac.AntdSpace([ html.Div([ fac.AntdText('value: ', strong=True), fac.AntdText(id='mentions-demo-output-value') ]), html.Div([ fac.AntdText('selectedOptions: ', strong=True), fac.AntdText(id='mentions-demo-output-selectedOptions') ]) ], direction='vertical', style={'width': '100%'}), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([
}), fmc.FefferyMarkdown(markdownStr=open('documents/AntdPopover.md', encoding='utf-8').read()), html.Div(html.Span('使用示例', id='使用示例', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ 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'}),
[ fac.AntdSteps( id='steps-demo', steps=[ { 'title': f'步骤{i}' } for i in range(5) ], direction='horizontal', type='navigation' ), fac.AntdDivider(), fac.AntdButton( '下一步', id='steps-demo-go-next', type='primary' ), fac.AntdDivider(direction='vertical'), fac.AntdButton( '上一步', id='steps-demo-go-last', type='primary' ), fac.AntdDivider(direction='vertical'), fac.AntdButton( '重置', id='steps-demo-restart', type='primary' ), fac.AntdDivider(),
'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdForm([ fac.AntdFormItem(fac.AntdInput(), 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}), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([ fac.AntdText(' 在默认的'), fac.AntdText('layout="horizontal"', code=True), fac.AntdText('布局模式下,我们可以通过妥善使用参数'), fac.AntdText('labelCol', code=True), fac.AntdText('与'), fac.AntdText('wrapperCol', code=True), fac.AntdText('来将若干个表单输入类组件组合为一张经典的表单') ]),
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%)',
fac.AntdSpace( [ fac.AntdInput( id='comment-demo-input', placeholder='发表你的感想...', mode='text-area', maxLength=140, allowClear=True, showCount=True ), fac.AntdButton( '提交评论', id='comment-demo-submit', type='primary', style={ 'float': 'right' } ) ], direction='vertical', style={ 'width': '100%' } ), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left' ),
docs_content = html.Div([ html.Div([ html.H2( 'AntdSkeleton(children, id, className, style, *args, **kwargs)', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5' }), fac.AntdBackTop(containerId='docs-content', duration=0.6), html.Span('主要参数说明:', id='主要参数说明', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), fmc.FefferyMarkdown(markdownStr=open('documents/AntdSkeleton.md', encoding='utf-8').read()), html.Div(html.Span('使用示例', id='使用示例', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdButton('触发2秒骨骼屏动画', id='skeleton-basic-demo-input', type='primary'), html.Br(), fac.AntdSkeleton(fac.AntdText('nClicks: 0', id='skeleton-basic-demo-output', strong=True), active=True), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([ fac.AntdText(' 默认模式下,被'), fac.AntdText('AntdSkeleton', strong=True), fac.AntdText('作为children参数传入的所有后代组件,在作为回调过程的'), fac.AntdText('Output', strong=True), fac.AntdText('处于回调中状态时,都会触发骨骼屏动画过程'), ]), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdButton('触发2秒骨骼屏动画', id='skeleton-basic-demo-input', type='primary'), html.Br(), fac.AntdSkeleton( fac.AntdText('nClicks: 0', id='skeleton-basic-demo-output', strong=True), active=True ) ... @app.callback( Output('skeleton-basic-demo-output', 'children'), Input('skeleton-basic-demo-input', 'nClicks'), prevent_initial_call=True ) def skeleton_basic_callback_demo(nClicks): import time time.sleep(2) return f'nClicks: {nClicks}' '''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight'), html.Div( [ fac.AntdButton('触发2秒骨骼屏动画', id='skeleton-custom-demo-input', type='primary'), html.Br(), fac.AntdSkeleton(fac.AntdText('nClicks: 0', id='skeleton-custom-demo-output', strong=True), active=True, avatar=True, paragraph={ 'rows': 3, 'width': '95%' }, title={'width': '4rem'}), fac.AntdDivider('自定义头像、段落及标题占位效果', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdButton('触发2秒骨骼屏动画', id='skeleton-custom-demo-input', type='primary'), html.Br(), fac.AntdSkeleton( fac.AntdText('nClicks: 0', id='skeleton-custom-demo-output', strong=True), active=True, avatar=True, paragraph={ 'rows': 3, 'width': '95%' }, title={ 'width': '4rem' } ) ... @app.callback( Output('skeleton-custom-demo-output', 'children'), Input('skeleton-custom-demo-input', 'nClicks'), prevent_initial_call=True ) def skeleton_custom_callback_demo(nClicks): import time time.sleep(2) return f'nClicks: {nClicks}' '''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='自定义头像、段落及标题占位效果', className='div-highlight'), html.Div(style={'height': '100px'}) ], style={'flex': 'auto'}), html.Div(fac.AntdAnchor(linkDict=[ { 'title': '主要参数说明', 'href': '#主要参数说明' }, { 'title': '使用示例', 'href': '#使用示例', 'children': [ { 'title': '基础使用', 'href': '#基础使用' }, { 'title': '自定义头像、段落及标题占位效果', 'href': '#自定义头像、段落及标题占位效果' }, ] }, ], offsetTop=0), style={ 'flex': 'none', 'margin': '20px' }) ],
}), fmc.FefferyMarkdown(markdownStr=open('documents/AntdPopconfirm.md', encoding='utf-8').read()), html.Div(html.Span('使用示例', id='使用示例', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdPopconfirm(fac.AntdButton('点击触发', type='primary'), title='气泡确认测试'), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdPopconfirm( fac.AntdButton( '点击触发', type='primary' ), title='气泡确认测试'
docs_content = html.Div([ html.Div([ html.H2('AntdModal(id, className, style, *args, **kwargs)', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5' }), fac.AntdBackTop(containerId='docs-content', duration=0.6), html.Span('主要参数说明:', id='主要参数说明', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), fmc.FefferyMarkdown(markdownStr=open('documents/AntdModal.md', encoding='utf-8').read()), html.Div(html.Span('使用示例', id='使用示例', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdButton( '触发对话框', type='primary', id='modal-demo-trigger-1'), fac.AntdModal(fac.AntdText('对话框内容测试'), id='modal-demo-1', visible=False, title={ 'content': '标题测试', 'prefixIcon': 'fc-search' }, renderFooter=True), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdButton( '触发对话框', type='primary', id='modal-demo-trigger-1' ), fac.AntdModal( fac.AntdText('对话框内容测试'), id='modal-demo-1', visible=False, title={ 'content': '标题测试', 'prefixIcon': 'fc-search' }, renderFooter=True ) ... @app.callback( Output('modal-demo-1', 'visible'), Input('modal-demo-trigger-1', 'nClicks'), prevent_initial_call=True ) def modal_demo_callback1(nClicks): return 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( [ fac.AntdButton( '触发对话框', type='primary', id='modal-demo-trigger-2'), fac.AntdModal(fac.AntdText('对话框内容测试'), id='modal-demo-2', visible=False, title={ 'content': '标题测试', 'prefixIcon': 'fc-search' }, renderFooter=True), html.Br(), fac.AntdSpace([ html.Div([ fac.AntdText('okCounts:', strong=True), fac.AntdText(id='modal-demo-2-output-1') ]), html.Div([ fac.AntdText('cancelCounts:', strong=True), fac.AntdText(id='modal-demo-2-output-2') ]), html.Div([ fac.AntdText('closeCounts:', strong=True), fac.AntdText(id='modal-demo-2-output-3') ]) ], direction='vertical'), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdButton( '触发对话框', type='primary', id='modal-demo-trigger-2' ), fac.AntdModal( fac.AntdText('对话框内容测试'), id='modal-demo-2', visible=False, title={ 'content': '标题测试', 'prefixIcon': 'fc-search' }, renderFooter=True ), html.Br(), fac.AntdSpace( [ html.Div( [ fac.AntdText('okCounts:', strong=True), fac.AntdText(id='modal-demo-2-output-1') ] ), html.Div( [ fac.AntdText('cancelCounts:', strong=True), fac.AntdText(id='modal-demo-2-output-2') ] ), html.Div( [ fac.AntdText('closeCounts:', strong=True), fac.AntdText(id='modal-demo-2-output-3') ] ) ], direction='vertical' ) ... @app.callback( Output('modal-demo-2', 'visible'), Input('modal-demo-trigger-2', 'nClicks'), prevent_initial_call=True ) def modal_demo_callback2(nClicks): return True @app.callback( [Output('modal-demo-2-output-1', 'children'), Output('modal-demo-2-output-2', 'children'), Output('modal-demo-2-output-3', 'children')], [Input('modal-demo-2', 'okCounts'), Input('modal-demo-2', 'cancelCounts'), Input('modal-demo-2', 'closeCounts')], prevent_initial_call=True ) def modal_demo_callback3(okCounts, cancelCounts, closeCounts): return [str(okCounts), str(cancelCounts), str(closeCounts)] '''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='回调示例', className='div-highlight'), html.Div(style={'height': '100px'}) ], style={'flex': 'auto'}), html.Div(fac.AntdAnchor(linkDict=[ { 'title': '主要参数说明', 'href': '#主要参数说明' }, { 'title': '使用示例', 'href': '#使用示例', 'children': [ { 'title': '基础使用', 'href': '#基础使用' }, { 'title': '回调示例', 'href': '#回调示例' }, ] }, ], offsetTop=0), style={ 'flex': 'none', 'margin': '20px' }) ],
style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='独立使用的徽标', className='div-highlight' ), html.Div( [ fac.AntdSpace( [ fac.AntdButton( '计数随机递增', id='badge-demo-generate', type='primary' ), fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), id='badge-demo-1', count=6 ), fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ),
[ html.Div( [ html.H2( 'AntdMessage(children, id, className, style, **kwargs)', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5' } ), fac.AntdBackTop( containerId='docs-content', duration=0.6 ), html.Span( '主要参数说明', id='主要参数说明', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' } ), fmc.FefferyMarkdown( markdownStr=open('documents/AntdMessage.md', encoding='utf-8').read() ), html.Div( html.Span( '使用示例', id='使用示例', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' } ), style={ 'marginBottom': '10px' } ), html.Div( [ fac.AntdSpin( [ fac.AntdButton('触发全局提示框', id='message-trigger-button-demo1', type='primary'), html.Div(id='message-container-demo1') ], text='回调中' ), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdParagraph( [ fac.AntdText(' AntdMessage', strong=True), fac.AntdText('的使用方式较为特殊,它属于'), fac.AntdText('昙花一现', strong=True), fac.AntdText('式的组件,相当于简化版的'), fac.AntdText('AntdNotification', strong=True), fac.AntdText(',不需要事先在'), fac.AntdText('app.layout', strong=True), fac.AntdText('中进行定义,推荐的使用方式是预先定义容纳它的容器,' '后续回调中直接将'), 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 ) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight' ), html.Div( [ fac.AntdSpin( [ fac.AntdSpace( [ fac.AntdButton( 'default', id='message-trigger-button-default-demo2', type='text' ), fac.AntdButton( 'info', id='message-trigger-button-info-demo2', type='text', style={ 'backgroundColor': 'rgb(24, 144, 255)', 'color': 'white' } ), fac.AntdButton( 'success', id='message-trigger-button-success-demo2', type='text', style={ 'backgroundColor': 'rgb(82, 196, 26)', 'color': 'white' } ), fac.AntdButton( 'error', id='message-trigger-button-error-demo2', type='text', style={ 'backgroundColor': 'rgb(255, 77, 79)', 'color': 'white' } ), fac.AntdButton( 'warning', id='message-trigger-button-warning-demo2', type='text', style={ 'backgroundColor': 'rgb(250, 173, 20)', 'color': 'white' } ), ] ), html.Div(id='message-container-demo2') ], text='回调中' ), fac.AntdDivider( '不同的状态', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdButton( 'default', id='message-trigger-button-default-demo2' ), fac.AntdButton( 'info', id='message-trigger-button-info-demo2', type='primary' ), fac.AntdButton( 'success', id='message-trigger-button-success-demo2', style={ 'backgroundColor': 'rgb(82, 196, 26)', 'color': 'white' } ), fac.AntdButton( 'error', id='message-trigger-button-error-demo2', style={ 'backgroundColor': 'rgb(255, 77, 79)', 'color': 'white' } ), fac.AntdButton( 'warning', id='message-trigger-button-warning-demo2', style={ 'backgroundColor': 'rgb(250, 173, 20)', 'color': 'white' } ), ] ), html.Div(id='message-container-demo2') ... @app.callback( Output('message-container-demo2', 'children'), [Input('message-trigger-button-default-demo2', 'nClicks'), Input('message-trigger-button-info-demo2', 'nClicks'), Input('message-trigger-button-success-demo2', 'nClicks'), Input('message-trigger-button-error-demo2', 'nClicks'), Input('message-trigger-button-warning-demo2', 'nClicks')], prevent_initial_call=True ) def message_demo2(default_nClicks, info_nClicks, success_nClicks, error_nClicks, warning_nClicks): ctx = dash.callback_context return fac.AntdMessage( content='全局提示框示例', type=ctx.triggered[0]['prop_id'].split('-')[3] )''' ), title='点击查看代码', is_open=False, ghost=True ) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='不同的状态', className='div-highlight' ), html.Div(style={'height': '100px'}) ], style={ 'flex': 'auto' } ), html.Div( fac.AntdAnchor( linkDict=[ {'title': '主要参数说明', 'href': '#主要参数说明'}, { 'title': '使用示例', 'href': '#使用示例', 'children': [ {'title': '基础使用', 'href': '#基础使用'}, {'title': '不同的状态', 'href': '#不同的状态'}, ] }, ], offsetTop=0 ), style={ 'flex': 'none', 'margin': '20px' } ) ],
id='将其他组件整合入侧边栏', className='div-highlight'), html.Div( [ fac.AntdSpin(html.Div( [ fac.AntdLayout([ fac.AntdSider(id='sider-custom-trigger-demo', collapsible=True, trigger=None, style={ 'backgroundColor': 'rgb(240, 242, 245)' }), fac.AntdContent(fac.AntdButton( '自定义折叠按钮', id='sider-custom-trigger-button-demo', type='primary'), style={'backgroundColor': 'white'}) ], style={'height': '600px'}) ], style={ 'height': '600px', 'border': '1px solid rgb(241, 241, 241)' }), text='回调中'), fac.AntdDivider('自定义侧边栏折叠触发器', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True,
[ html.Div( [ html.H2( 'AntdSpin(children, id, className, style, *args, **kwargs)', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5' } ), fac.AntdBackTop( containerId='docs-content', duration=0.6 ), html.Span( '主要参数说明:', id='主要参数说明', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' } ), fmc.FefferyMarkdown( markdownStr=open('documents/AntdSpin.md', encoding='utf-8').read() ), html.Div( html.Span( '使用示例', id='使用示例', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' } ), style={ 'marginBottom': '10px' } ), html.Div( [ fac.AntdButton('触发2秒加载动画', id='spin-basic-demo-input', type='primary'), fac.AntdSpin( fac.AntdText('nClicks: 0', id='spin-basic-demo-output', strong=True), text='回调中' ), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdParagraph( [ fac.AntdText(' 默认模式下,被'), fac.AntdText('AntdSpin', strong=True), fac.AntdText('作为children参数传入的所有后代组件,在作为回调过程的'), fac.AntdText('Output', strong=True), fac.AntdText('处于回调中状态时,都会触发加载动画过程'), ] ), 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 ) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight' ), html.Div( [ fac.AntdSpace( [ fac.AntdButton('触发耗时0.5秒的回调过程', id='spin-delay-demo-input1', type='primary'), fac.AntdButton('触发耗时2秒的回调过程', id='spin-delay-demo-input2', type='primary') ] ), fac.AntdSpin( fac.AntdText('0.5秒回调 nClicks: 0', id='spin-delay-demo-output1', strong=True), delay=1000, text='回调中' ), fac.AntdSpin( fac.AntdText('2s回调 nClicks: 0', id='spin-delay-demo-output2', strong=True), delay=1000, text='回调中' ), fac.AntdDivider( '延迟加载', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdParagraph( [ fac.AntdText('当监听的后代组件实际加载耗时低于'), fac.AntdText('delay', strong=True), fac.AntdText('所设置的时长时,加载动画不会被触发') ] ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdButton('触发耗时0.5秒的回调过程', id='spin-delay-demo-input1', type='primary'), fac.AntdButton('触发耗时2秒的回调过程', id='spin-delay-demo-input2', type='primary') ] ), fac.AntdSpin( fac.AntdText('0.5秒回调 nClicks: 0', id='spin-delay-demo-output1', strong=True), delay=1000, text='回调中' ), fac.AntdSpin( fac.AntdText('2s回调 nClicks: 0', id='spin-delay-demo-output2', strong=True), delay=1000, text='回调中' ) ... @app.callback( Output('spin-delay-demo-output1', 'children'), Input('spin-delay-demo-input1', 'nClicks'), prevent_initial_call=True ) def spin_delay_callback_demo1(nClicks): import time time.sleep(0.5) return f'0.5秒回调 nClicks: {nClicks}' @app.callback( Output('spin-delay-demo-output2', 'children'), Input('spin-delay-demo-input2', 'nClicks'), prevent_initial_call=True ) def spin_delay_callback_demo2(nClicks): import time time.sleep(2) return f'2秒回调 nClicks: {nClicks}' ''' ), title='点击查看代码', is_open=False, ghost=True ) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='延迟加载', className='div-highlight' ), html.Div( [ fac.AntdSpace( [ fac.AntdButton('未被includeProps指定', id='spin-include-demo-input1', type='primary'), fac.AntdButton('被includeProps指定', id='spin-include-demo-input2', type='primary') ] ), fac.AntdSpin( fac.AntdSpace( [ fac.AntdText('未被includeProps指定 nClicks: 0', id='spin-include-demo-output1', strong=True), fac.AntdText('被includeProps指定 nClicks: 0', id='spin-include-demo-output2', strong=True) ], direction='vertical' ), listenPropsMode='include', includeProps=['spin-include-demo-output2.children'], text='回调中' ), fac.AntdDivider( 'include模式', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdParagraph( [ fac.AntdText(" listenPropsMode='include'", strong=True), fac.AntdText("时,由"), fac.AntdText('includeProps', strong=True), fac.AntdText('指定的组件属性对应的'), fac.AntdText('Output', strong=True), fac.AntdText('回调过程才会触发加载动画'), ] ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdButton('未被includeProps指定', id='spin-include-demo-input1', type='primary'), fac.AntdButton('被includeProps指定', id='spin-include-demo-input2', type='primary') ] ), fac.AntdSpin( fac.AntdSpace( [ fac.AntdText('未被includeProps指定 nClicks: 0', id='spin-include-demo-output1', strong=True), fac.AntdText('被includeProps指定 nClicks: 0', id='spin-include-demo-output2', strong=True) ], direction='vertical' ), listenPropsMode='include', includeProps=['spin-include-demo-output2.children'], text='回调中' ) ... @app.callback( Output('spin-include-demo-output1', 'children'), Input('spin-include-demo-input1', 'nClicks'), prevent_initial_call=True ) def spin_include_callback_demo1(nClicks): import time time.sleep(1) return f'未被includeProps指定 nClicks: {nClicks}' @app.callback( Output('spin-include-demo-output2', 'children'), Input('spin-include-demo-input2', 'nClicks'), prevent_initial_call=True ) def spin_include_callback_demo2(nClicks): import time time.sleep(1) return f'被includeProps指定 nClicks: {nClicks}' ''' ), title='点击查看代码', is_open=False, ghost=True ) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='include模式', className='div-highlight' ), html.Div( [ fac.AntdSpace( [ fac.AntdButton('未被excludeProps指定', id='spin-exclude-demo-input1', type='primary'), fac.AntdButton('被excludeProps指定', id='spin-exclude-demo-input2', type='primary') ] ), fac.AntdSpin( fac.AntdSpace( [ fac.AntdText('未被excludeProps指定 nClicks: 0', id='spin-exclude-demo-output1', strong=True), fac.AntdText('被excludeProps指定 nClicks: 0', id='spin-exclude-demo-output2', strong=True) ], direction='vertical' ), listenPropsMode='exclude', excludeProps=['spin-exclude-demo-output2.children'], text='回调中' ), fac.AntdDivider( 'exclude模式', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdParagraph( [ fac.AntdText(" listenPropsMode='exclude'", strong=True), fac.AntdText("时,由"), fac.AntdText('excludeProps', strong=True), fac.AntdText('指定的组件属性对应的'), fac.AntdText('Output', strong=True), fac.AntdText('回调过程不会触发加载动画'), ] ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdButton('未被excludeProps指定', id='spin-exclude-demo-input1', type='primary'), fac.AntdButton('被excludeProps指定', id='spin-exclude-demo-input2', type='primary') ] ), fac.AntdSpin( fac.AntdSpace( [ fac.AntdText('未被excludeProps指定 nClicks: 0', id='spin-exclude-demo-output1', strong=True), fac.AntdText('被excludeProps指定 nClicks: 0', id='spin-exclude-demo-output2', strong=True) ], direction='vertical' ), listenPropsMode='exclude', excludeProps=['spin-exclude-demo-output2.children'], text='回调中' ) ... @app.callback( Output('spin-exclude-demo-output1', 'children'), Input('spin-exclude-demo-input1', 'nClicks'), prevent_initial_call=True ) def spin_exclude_callback_demo1(nClicks): import time time.sleep(1) return f'未被excludeProps指定 nClicks: {nClicks}' @app.callback( Output('spin-exclude-demo-output2', 'children'), Input('spin-exclude-demo-input2', 'nClicks'), prevent_initial_call=True ) def spin_exclude_callback_demo2(nClicks): import time time.sleep(1) return f'被excludeProps指定 nClicks: {nClicks}' ''' ), title='点击查看代码', is_open=False, ghost=True ) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='exclude模式', className='div-highlight' ), html.Div(style={'height': '100px'}) ], style={ 'flex': 'auto' } ), html.Div( fac.AntdAnchor( linkDict=[ {'title': '主要参数说明', 'href': '#主要参数说明'}, { 'title': '使用示例', 'href': '#使用示例', 'children': [ {'title': '基础使用', 'href': '#基础使用'}, {'title': '延迟加载', 'href': '#延迟加载'}, {'title': 'include模式', 'href': '#include模式'}, {'title': 'exclude模式', 'href': '#exclude模式'}, ] }, ], offsetTop=0 ), style={ 'flex': 'none', 'margin': '20px' } ) ],
}), fmc.FefferyMarkdown(markdownStr=open('documents/AntdTooltip.md', encoding='utf-8').read()), html.Div(html.Span('使用示例', id='使用示例', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdTooltip(fac.AntdButton('请将鼠标悬浮于此', type='primary'), title='这是一段AntdTooltip提示示例'), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdTooltip( fac.AntdButton( '请将鼠标悬浮于此', type='primary' ), title='这是一段AntdTooltip提示示例'
docs_content = html.Div([ html.Div([ html.H2('AntdNotification(children, id, className, style, **kwargs)', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5' }), fac.AntdBackTop(containerId='docs-content', duration=0.6), html.Span('主要参数说明', id='主要参数说明', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), fmc.FefferyMarkdown(markdownStr=open('documents/AntdNotification.md', encoding='utf-8').read()), html.Div(html.Span('使用示例', id='使用示例', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdSpin([ fac.AntdButton('触发通知提示框', id='notification-trigger-button-demo1', type='primary'), html.Div(id='notification-container-demo1') ], text='回调中'), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([ fac.AntdText(' AntdNotification', strong=True), fac.AntdText('的使用方式较为特殊,它属于'), fac.AntdText('昙花一现', strong=True), fac.AntdText('式的组件,不需要事先在'), 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', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight'), html.Div( [ fac.AntdSpin([ fac.AntdSelect(placeholder='选择不同的状态', options=[{ 'label': 'default', 'value': 'default' }, { 'label': 'success', 'value': 'success' }, { 'label': 'error', 'value': 'error' }, { 'label': 'info', 'value': 'info' }, { 'label': 'warning', 'value': 'warning' }], id='notification-type-select-demo2', style={'width': '200px'}), fac.AntdButton('触发通知提示框', id='notification-trigger-button-demo2', type='primary'), html.Div(id='notification-container-demo2') ], text='回调中'), fac.AntdDivider( '不同的状态', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSelect( placeholder='选择不同的状态', options=[ { 'label': 'default', 'value': 'default' }, { 'label': 'success', 'value': 'success' }, { 'label': 'error', 'value': 'error' }, { 'label': 'info', 'value': 'info' }, { 'label': 'warning', 'value': 'warning' } ], id='notification-type-select-demo2', style={ 'width': '200px' } ), fac.AntdButton('触发通知提示框', id='notification-trigger-button-demo2', type='primary'), html.Div(id='notification-container-demo2') ... @app.callback( Output('notification-container-demo2', 'children'), Input('notification-trigger-button-demo2', 'nClicks'), State('notification-type-select-demo2', 'value'), prevent_initial_call=True ) def notification_demo2(nClicks, value): if value: return fac.AntdNotification( message='通知提示框测试', description='这是一段辅助说明文字内容', type=value )'''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='不同的状态', className='div-highlight'), html.Div( [ fac.AntdSpin([ fac.AntdSelect(placeholder='选择不同的弹出位置', options=[{ 'label': 'topLeft', 'value': 'topLeft' }, { 'label': 'topRight', 'value': 'topRight' }, { 'label': 'bottomLeft', 'value': 'bottomLeft' }, { 'label': 'bottomRight', 'value': 'bottomRight' }], id='notification-placement-select-demo3', style={'width': '200px'}), fac.AntdButton('触发通知提示框', id='notification-trigger-button-demo3', type='primary'), html.Div(id='notification-container-demo3') ], text='回调中'), fac.AntdDivider('不同的弹出位置', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSelect( placeholder='选择不同的弹出位置', options=[ { 'label': 'topLeft', 'value': 'topLeft' }, { 'label': 'topRight', 'value': 'topRight' }, { 'label': 'bottomLeft', 'value': 'bottomLeft' }, { 'label': 'bottomRight', 'value': 'bottomRight' } ], id='notification-placement-select-demo3', style={ 'width': '200px' } ), fac.AntdButton('触发通知提示框', id='notification-trigger-button-demo3', type='primary'), html.Div(id='notification-container-demo3') ... @app.callback( Output('notification-container-demo3', 'children'), Input('notification-trigger-button-demo3', 'nClicks'), State('notification-placement-select-demo3', 'value'), prevent_initial_call=True ) def notification_demo3(nClicks, value): if value: return fac.AntdNotification( message='通知提示框测试', description='这是一段辅助说明文字内容', placement=value )'''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='不同的弹出位置', className='div-highlight'), html.Div( [ fac.AntdSpin([ fac.AntdSpace([ fac.AntdSlider( id='notification-slider-demo4', tooltipVisible=False, min=1, max=10, step=1, defaultValue=5, marks={ **{i: f'{i}秒' for i in range(1, 10)}, **{ 10: 'None' } }, style={'width': '400px'}), fac.AntdButton('触发通知提示框', id='notification-trigger-button-demo4', type='primary') ], size='large'), html.Div(id='notification-container-demo4') ], text='回调中'), fac.AntdDivider('持续显示时长的设置', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdSlider( id='notification-slider-demo4', tooltipVisible=False, min=1, max=10, step=1, defaultValue=5, marks={ **{ i: f'{i}秒' for i in range(1, 10) }, **{ 10: 'None' } }, style={ 'width': '400px' } ), fac.AntdButton('触发通知提示框', id='notification-trigger-button-demo4', type='primary') ], size='large' ), html.Div(id='notification-container-demo4') ... @app.callback( Output('notification-container-demo4', 'children'), Input('notification-trigger-button-demo4', 'nClicks'), State('notification-slider-demo4', 'value'), prevent_initial_call=True ) def notification_demo4(nClicks, value): if value: return fac.AntdNotification( message=f'持续时长{value}秒' if value != 10 else '持续时长∞秒', description='这是一段辅助说明文字内容', duration=value if value != 10 else None )'''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='持续显示时长的设置', className='div-highlight'), html.Div(style={'height': '100px'}) ], style={'flex': 'auto'}), html.Div(fac.AntdAnchor(linkDict=[ { 'title': '主要参数说明', 'href': '#主要参数说明' }, { 'title': '使用示例', 'href': '#使用示例', 'children': [ { 'title': '基础使用', 'href': '#基础使用' }, { 'title': '不同的状态', 'href': '#不同的状态' }, { 'title': '不同的弹出位置', 'href': '#不同的弹出位置' }, { 'title': '持续显示时长的设置', 'href': '#持续显示时长的设置' }, ] }, ], offsetTop=0), style={ 'flex': 'none', 'margin': '20px' }) ],
'''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight'), html.Div( [ fac.AntdPageHeader(fac.AntdSpace([ fac.AntdButton('按钮1'), fac.AntdButton('按钮2', type='primary'), fac.AntdSwitch(checkedChildren='打开', unCheckedChildren='关闭'), fac.AntdBadge(status='processing') ]), title='页头标题示例', subTitle='页头副标题示例'), fac.AntdDivider('带有子元素的页头', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows',
'title': sub_item['props']['title'], 'handler': '() => window.open("%s")' % sub_item['props']['href'], 'section': group['props']['title'] } for group in Config.menuItems for item in group['children'] if item['component'] == 'SubMenu' for sub_item in item['children']]), # 注入快捷添加好友悬浮卡片 html.Div( [ fac.AntdPopover(fac.AntdButton( fac.AntdIcon(icon='antd-bulb'), shape='circle', style={ 'zoom': '1.25', 'boxShadow': '0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d' }), placement='left', content=[ fac.AntdText( '微信扫码加我好友,备注【dash学习】加入学习交流群,更多灵感更快进步', strong=True), fac.AntdImage(src=app.get_asset_url( 'imgs/feffery-添加好友二维码.jpg'), width=250, preview=False) ], overlayStyle={
docs_content = html.Div([ html.Div([ html.H2('AntdDrawer(id, className, style, *args, **kwargs)', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5' }), fac.AntdBackTop(containerId='docs-content', duration=0.6), html.Span('主要参数说明:', id='主要参数说明', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), fmc.FefferyMarkdown(markdownStr=open('documents/AntdDrawer.md', encoding='utf-8').read()), html.Div(html.Span('使用示例', id='使用示例', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdButton( '触发抽屉', type='primary', id='drawer-demo-trigger-1'), fac.AntdDrawer(fac.AntdText('抽屉内容测试' * 200), id='drawer-demo-1', style={'zIndex': 99999}), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdButton( '触发抽屉', type='primary', id='drawer-demo-trigger-1' ), fac.AntdDrawer( fac.AntdText('抽屉内容测试' * 200), id='drawer-demo-1', style={ 'zIndex': 99999 } ) ... @app.callback( Output('drawer-demo-1', 'visible'), Input('drawer-demo-trigger-1', 'nClicks'), prevent_initial_call=True ) def drawer_demo_callback1(nClicks): return 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( [ fac.AntdSpace([ fac.AntdButton('top方向', type='primary', id='drawer-demo-trigger-2-top'), fac.AntdButton('left方向', type='primary', id='drawer-demo-trigger-2-left'), fac.AntdButton('bottom方向', type='primary', id='drawer-demo-trigger-2-bottom'), ]), fac.AntdDrawer(fac.AntdText('抽屉内容测试' * 100), id='drawer-demo-2-top', placement='top', mask=False, style={'zIndex': 99999}), fac.AntdDrawer(fac.AntdText('抽屉内容测试' * 100), id='drawer-demo-2-left', placement='left', mask=False, style={'zIndex': 99999}), fac.AntdDrawer(fac.AntdText('抽屉内容测试' * 100), id='drawer-demo-2-bottom', placement='bottom', mask=False, style={'zIndex': 99999}), fac.AntdDivider('不同的抽屉弹出方向', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdButton( 'top方向', type='primary', id='drawer-demo-trigger-2-top' ), fac.AntdButton( 'left方向', type='primary', id='drawer-demo-trigger-2-left' ), fac.AntdButton( 'bottom方向', type='primary', id='drawer-demo-trigger-2-bottom' ), ] ), fac.AntdDrawer( fac.AntdText('抽屉内容测试' * 100), id='drawer-demo-2-top', placement='top', mask=False, style={ 'zIndex': 99999 } ), fac.AntdDrawer( fac.AntdText('抽屉内容测试' * 100), id='drawer-demo-2-left', placement='left', mask=False, style={ 'zIndex': 99999 } ), fac.AntdDrawer( fac.AntdText('抽屉内容测试' * 100), id='drawer-demo-2-bottom', placement='bottom', mask=False, style={ 'zIndex': 99999 } ) ... @app.callback( [Output('drawer-demo-2-top', 'visible'), Output('drawer-demo-2-left', 'visible'), Output('drawer-demo-2-bottom', 'visible')], [Input('drawer-demo-trigger-2-top', 'nClicks'), Input('drawer-demo-trigger-2-left', 'nClicks'), Input('drawer-demo-trigger-2-bottom', 'nClicks')], prevent_initial_call=True ) def drawer_demo_callback2(_, __, ___): ctx = dash.callback_context placement = ctx.triggered[0]['prop_id'].split('.')[0].split('-')[-1] if placement == 'top': return True, False, False elif placement == 'left': return False, True, False else: return False, False, 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(style={'height': '100px'}) ], style={'flex': 'auto'}), html.Div(fac.AntdAnchor(linkDict=[ { 'title': '主要参数说明', 'href': '#主要参数说明' }, { 'title': '使用示例', 'href': '#使用示例', 'children': [ { 'title': '基础使用', 'href': '#基础使用' }, { 'title': '不同的抽屉弹出方向', 'href': '#不同的抽屉弹出方向' }, ] }, ], offsetTop=0), style={ 'flex': 'none', 'margin': '20px' }) ],