fac.AntdSpin([ fac.AntdSpace([ fac.AntdInput(id='input-value-demo', placeholder='value直接作为Input', maxLength=100, style={ 'width': '250px', 'marginBottom': '5px' }), html.Span(id='input-value-demo-output') ]), html.Br(), fac.AntdSpace([ fac.AntdInput( id='input-nSubmit-demo', placeholder='nSubmit作为Input,value作为State', maxLength=100, style={ 'width': '250px', 'marginBottom': '5px' }), html.Span(id='input-nSubmit-demo-output') ]), html.Br(), fac.AntdSpace([ fac.AntdInput( id='input-nClicksSearch-demo', mode='search', placeholder='nClicksSearch作为Input,value作为State', maxLength=100, style={ 'width': '320px', 'marginBottom': '5px' }), html.Span(id='input-nClicksSearch-demo-output') ]) ], text='回调中'),
[ fac.AntdSpin([ fac.AntdDropdown(id='dropdown-demo', title='触发点', arrow=True, placement='topCenter', menuItems=[{ 'title': '子页面1', 'key': '子页面1', }, { 'title': '子页面2', 'key': '子页面2', }, { 'isDivider': True }, { 'title': '子页面3-1', 'key': '子页面3-1' }, { 'title': '子页面3-2', 'key': '子页面3-2' }]), html.Div(id='dropdown-demo-output') ], text='回调中'), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([ fac.AntdText(' 除了在构造选项时传入href等参数令选项充当链接跳转功能之外,'), fac.AntdText('AntdDropdown', strong=True), fac.AntdText('还可通过为选项设置key值,从而在回调中监听'), fac.AntdText('clickedKey', strong=True), fac.AntdText('随着选项点击事件的变化') ]), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpin( [ fac.AntdDropdown( id='dropdown-demo', title='触发点', arrow=True, placement='topCenter', menuItems=[ { 'title': '子页面1', 'key': '子页面1', }, { 'title': '子页面2', 'key': '子页面2', }, { 'isDivider': True }, { 'title': '子页面3-1', 'key': '子页面3-1' }, { 'title': '子页面3-2', 'key': '子页面3-2' } ] ), html.Div( id='dropdown-demo-output' ) ], text='回调中' ) ... @app.callback( Output('dropdown-demo-output', 'children'), Input('dropdown-demo', 'clickedKey'), prevent_initial_call=True ) def dropdown_demo_callback(clickedKey): return [ fac.AntdText('clickedKey: ', strong=True), fac.AntdText(clickedKey) ] '''), title='点击查看代码', is_open=False, ghost=True) ],
[ fac.AntdSpin(html.Div([ fac.AntdSwitch(id='switch-demo', style={'marginRight': '10px'}), fac.AntdText('checked:', strong=True), fac.AntdText(id='switch-demo-output') ]), text='回调中'), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpin( html.Div( [ fac.AntdSwitch( id='switch-demo', style={ 'marginRight': '10px' } ), fac.AntdText('checked:', strong=True), fac.AntdText(id='switch-demo-output') ] ), text='回调中' ) ... @app.callback( Output('switch-demo-output', 'children'), Input('switch-demo', 'checked') ) def switch_demo_callback(checked): return str(checked)'''), title='点击查看代码', is_open=False, ghost=True) ],
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('对象作为回调输出返回对应容器即可,譬如本例中由按钮触发通知提示框的弹出显示')
) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='自主控制显示空状态示例', className='div-highlight' ), html.Div( [ fac.AntdSpin( html.Pre('[]', id='select-demo-output'), text='回调中' ), fac.AntdSelect( id='select-demo', placeholder='请选择国家:', mode='multiple', options=[ {'label': '中国', 'value': '中国'}, {'label': '美国', 'value': '美国'}, {'label': '俄罗斯', 'value': '俄罗斯'}, {'label': '德国', 'value': '德国', 'disabled': True}, {'label': '加拿大', 'value': '加拿大'} ], style={ # 使用css样式固定宽度 'width': '200px'
fac.AntdSpin( [ fac.AntdButton( '新建标签页', id='tabs-demo-add', type='primary', style={ 'marginBottom': '5px' } ), fac.AntdTabs( [ fac.AntdTabPane( '基础标签页', tab='基础标签页', key='基础标签页', closable=False ), fac.AntdTabPane( tab='禁用标签页', key='禁用标签页', disabled=True ) ] + [ fac.AntdTabPane( '标签页1', tab='标签页1', key='标签页1' ) ], id='tabs-demo', type='editable-card' ) ], text='回调中' ),
[ fac.AntdSpin([ html.Div(id='time-range-picker-demo-output'), fac.AntdTimeRangePicker(id='time-range-picker-demo', allowClear=True, format='hh时mm分ss秒', style={'width': '300px'}) ], text='回调中'), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpin( [ html.Div( id='time-range-picker-demo-output' ), fac.AntdTimeRangePicker( id='time-range-picker-demo', allowClear=True, format='hh时mm分ss秒', style={ 'width': '300px' } ) ], text='回调中' ) ... @app.callback( Output('time-range-picker-demo-output', 'children'), Input('time-range-picker-demo', 'value'), prevent_initial_call=True ) def time_range_picker_demo_callback(value): return [ fac.AntdText('value: ', strong=True), fac.AntdText(f'{value[0]} ~ {value[1]}') ] '''), title='点击查看代码', is_open=False, ghost=True) ],
[ fac.AntdSpin( fac.AntdSpace( [ html.Div( [ fac.AntdText('单选value:', strong=True), fac.AntdText(id='cascader-demo-output') ] ), html.Div( [ fac.AntdText('多选value:', strong=True), fac.AntdText(id='cascader-multiple-demo-output') ] ), fac.AntdCascader( id='cascader-demo', placeholder='单选回调示例:', options=[ { 'value': '节点1', 'label': '节点1', 'children': [ { 'value': '节点1-1', 'label': '节点1-1' }, { 'value': '节点1-2', 'label': '节点1-2', 'children': [ { 'value': '节点1-2-1', 'label': '节点1-2-1' }, { 'value': '节点1-2-2', 'label': '节点1-2-2' } ] } ] }, { 'value': '节点2', 'label': '节点2', 'children': [ { 'value': '节点2-1', 'label': '节点2-1' }, { 'value': '节点2-2', 'label': '节点2-2' } ] } ], style={ 'width': '300px' } ), fac.AntdCascader( id='cascader-multiple-demo', placeholder='多选回调示例:', options=[ { 'value': '节点1', 'label': '节点1', 'children': [ { 'value': '节点1-1', 'label': '节点1-1' }, { 'value': '节点1-2', 'label': '节点1-2', 'children': [ { 'value': '节点1-2-1', 'label': '节点1-2-1' }, { 'value': '节点1-2-2', 'label': '节点1-2-2' } ] } ] }, { 'value': '节点2', 'label': '节点2', 'children': [ { 'value': '节点2-1', 'label': '节点2-1' }, { 'value': '节点2-2', 'label': '节点2-2' } ] } ], multiple=True, style={ 'width': '300px' } ) ], direction='vertical' ), text='回调中' ), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdParagraph( [ fac.AntdText(' AntdCascader', strong=True), fac.AntdText('已选择的值会在value中以层级选择路径对应值列表的形式进行记录,当满足后代节点被全选时则会仅记录对应的祖先节点值') ] ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpin( fac.AntdSpace( [ html.Div( [ fac.AntdText('单选value:', strong=True), fac.AntdText(id='cascader-demo-output') ] ), html.Div( [ fac.AntdText('多选value:', strong=True), fac.AntdText(id='cascader-multiple-demo-output') ] ), fac.AntdCascader( id='cascader-demo', placeholder='单选回调示例:', options=[ { 'value': '节点1', 'label': '节点1', 'children': [ { 'value': '节点1-1', 'label': '节点1-1' }, { 'value': '节点1-2', 'label': '节点1-2', 'children': [ { 'value': '节点1-2-1', 'label': '节点1-2-1' }, { 'value': '节点1-2-2', 'label': '节点1-2-2' } ] } ] }, { 'value': '节点2', 'label': '节点2', 'children': [ { 'value': '节点2-1', 'label': '节点2-1' }, { 'value': '节点2-2', 'label': '节点2-2' } ] } ], style={ 'width': '300px' } ), fac.AntdCascader( id='cascader-multiple-demo', placeholder='多选回调示例:', options=[ { 'value': '节点1', 'label': '节点1', 'children': [ { 'value': '节点1-1', 'label': '节点1-1' }, { 'value': '节点1-2', 'label': '节点1-2', 'children': [ { 'value': '节点1-2-1', 'label': '节点1-2-1' }, { 'value': '节点1-2-2', 'label': '节点1-2-2' } ] } ] }, { 'value': '节点2', 'label': '节点2', 'children': [ { 'value': '节点2-1', 'label': '节点2-1' }, { 'value': '节点2-2', 'label': '节点2-2' } ] } ], multiple=True, style={ 'width': '300px' } ) ], direction='vertical' ), text='回调中' ) ... @app.callback( Output('cascader-demo-output', 'children'), Input('cascader-demo', 'value') ) def cascader_demo_callback(value): return str(value) @app.callback( Output('cascader-multiple-demo-output', 'children'), Input('cascader-multiple-demo', 'value') ) def cascader_multiple_demo_callback(value): return str(value)''' ), title='点击查看代码', is_open=False, ghost=True ) ],
'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='设置数值提示框前后缀文字', className='div-highlight'), html.Div( [ html.Div([ fac.AntdSlider(id='slider-demo-1', min=-100, max=100), fac.AntdSlider( id='slider-demo-2', range=True, min=-100, max=100) ], style={'width': '400px'}), html.Br(), fac.AntdSpin(html.Em(id='slider-demo-output'), text='回调中'), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' html.Div( [ fac.AntdSlider(id='slider-demo-1', min=-100, max=100), fac.AntdSlider(id='slider-demo-2', range=True, min=-100, max=100) ], style={ 'width': '400px'
[ fac.AntdSpin([ html.Div([ fac.AntdText('value:', strong=True), fac.AntdText(id='tree-select-demo-output') ]), fac.AntdTreeSelect(id='tree-select-demo', treeData=[{ "title": "Node1", "value": "0-0", "key": "0-0", "children": [{ "title": "Child Node1", "value": "0-0-0", "key": "0-0-0" }] }, { "title": "Node2", "value": "0-1", "key": "0-1", "children": [{ "title": "Child Node3", "value": "0-1-0", "key": "0-1-0" }, { "title": "Child Node4", "value": "0-1-1", "key": "0-1-1" }, { "title": "Child Node5", "value": "0-1-2", "key": "0-1-2" }] }], style={'width': '250px'}) ], text='回调中'), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpin( [ html.Div( [ fac.AntdText('value:', strong=True), fac.AntdText(id='tree-select-demo-output') ] ), fac.AntdTreeSelect( id='tree-select-demo', treeData=[ { "title": "Node1", "value": "0-0", "key": "0-0", "children": [ { "title": "Child Node1", "value": "0-0-0", "key": "0-0-0" } ] }, { "title": "Node2", "value": "0-1", "key": "0-1", "children": [ { "title": "Child Node3", "value": "0-1-0", "key": "0-1-0" }, { "title": "Child Node4", "value": "0-1-1", "key": "0-1-1" }, { "title": "Child Node5", "value": "0-1-2", "key": "0-1-2" } ] } ], style={ 'width': '250px' } ) ], text='回调中' ) ... @app.callback( Output('tree-select-demo-output', 'children'), Input('tree-select-demo', 'value') ) def tree_select_demo_callback(value): return str(value) '''), title='点击查看代码', is_open=False, ghost=True) ],
), 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(), fac.AntdSpin( html.Em(id='steps-demo-current'), text='回调中' ), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString='''
[ fac.AntdSpin( [ fac.AntdRadioGroup( id='radio-group-demo', options=[ { 'label': f'选项{i}', 'value': f'选项{i}' } for i in range(5) ], defaultValue='选项1' ), html.Div( [ fac.AntdText('value:', strong=True), fac.AntdText(id='radio-group-demo-output') ] ) ], text='回调中' ), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpin( [ fac.AntdRadioGroup( id='radio-group-demo', options=[ { 'label': f'选项{i}', 'value': f'选项{i}' } for i in range(5) ], defaultValue='选项1' ), html.Div( [ fac.AntdText('value:', strong=True), fac.AntdText(id='radio-group-demo-output') ] ) ], text='回调中' ) ... @app.callback( Output('radio-group-demo-output', 'children'), Input('radio-group-demo', 'value') ) def radio_group_demo_callback(value): return str(value) ''' ), title='点击查看代码', is_open=False, ghost=True ) ],
'label': 'Game Icons精选', 'value': 'gi' }, { 'label': 'IcoMoon Free精选', 'value': 'im' } ], optionType='button', defaultValue='antd' ), fac.AntdSpin( fac.AntdRow( id='icon-demo', style={ 'minHeight': '50px' } ) ), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdParagraph( [ fac.AntdText(' AntdIcon', strong=True), fac.AntdText('可配合'), fac.AntdText('AntdButton', strong=True),
'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='修改左右区域标题及双向按钮文字', className='div-highlight'), html.Div( [ html.Div( fac.AntdTransfer(id='transfer-demo', dataSource=[{ 'key': str(i), 'title': f'选项{i}' } for i in range(20)])), html.Br(), fac.AntdSpin(html.Em(id='transfer-demo-output'), text='回调中'), fac.AntdDivider('回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' html.Div( fac.AntdTransfer( id='transfer-demo', dataSource=[ { 'key': str(i),
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.AntdDateRangePicker(id='date-range-picker-demo'), html.Br(), fac.AntdSpin(html.Em(id='date-range-picker-demo-output'), text='回调中'), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdDateRangePicker(id='date-range-picker-demo'), html.Br(), html.Em(id='date-range-picker-demo-output') ... @app.callback( Output('date-range-picker-demo-output', 'children'), Input('date-range-picker-demo', 'value'),
[ fac.AntdSpin(fac.AntdForm([ fac.AntdFormItem(fac.AntdRadioGroup( id='form-demo-1-status', options=[{ 'label': 'None', 'value': 'None' }, { 'label': 'success', 'value': 'success', }, { 'label': 'warning', 'value': 'warning', }, { 'label': 'error', 'value': 'error', }, { 'label': 'validating', 'value': 'validating', }], optionType='button', defaultValue='None'), label='切换状态'), fac.AntdFormItem( fac.AntdInput(), id='form-demo-1', label='用户名') ], labelCol={'span': 4}, wrapperCol={'span': 8}), text='回调中', delay=300), fac.AntdDivider('不同的校验状态', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpin( fac.AntdForm( [ fac.AntdFormItem( fac.AntdRadioGroup( id='form-demo-1-status', options=[ { 'label': 'None', 'value': 'None' }, { 'label': 'success', 'value': 'success', }, { 'label': 'warning', 'value': 'warning', }, { 'label': 'error', 'value': 'error', }, { 'label': 'validating', 'value': 'validating', } ], optionType='button', defaultValue='None' ), label='切换状态' ), fac.AntdFormItem( fac.AntdInput(), id='form-demo-1', label='用户名' ) ], labelCol={ 'span': 4 }, wrapperCol={ 'span': 8 } ), text='回调中', delay=300 ) ... @app.callback( [Output('form-demo-1', 'validateStatus'), Output('form-demo-1', 'help')], Input('form-demo-1-status', 'value') ) def form_demo_1_callback(value): if not value or value == 'None': return None, None return value, f'validateStatus="{value}"' '''), title='点击查看代码', is_open=False, ghost=True) ],
html.Div( [ fac.AntdSpace([ 'multiple:', fac.AntdSwitch(id='dragger-upload-demo-is-multiple', checked=False, checkedChildren='True', unCheckedChildren='False') ], style={'marginBottom': '5px'}), fac.AntdDraggerUpload(id='dragger-upload-demo', apiUrl='/upload/', fileMaxSize=1, text='拖拽上传示例', hint='点击或拖拽文件至此处进行上传'), fac.AntdSpin(html.Pre(id='dragger-upload-demo-output'), text='回调中'), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([ fac.AntdText( ' 这个例子展示了在满足文件体积限制的前提下,每次上传任务执行后,对成功或失败状态进行记录的相关参数信息,' ), fac.AntdText('注意!', strong=True), fac.AntdText('当'), fac.AntdText('multiple=True', code=True), fac.AntdText('或'), fac.AntdText('directory=True', code=True), fac.AntdText('时,'), fac.AntdText('lastUploadTaskRecord', code=True), fac.AntdText('参数会返回列表格式以记录每个文件的信息') ]),
[ 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, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' 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='回调中' ) ... @app.callback( Output('sider-custom-trigger-demo', 'collapsed'), Input('sider-custom-trigger-button-demo', 'nClicks'), State('sider-custom-trigger-demo', 'collapsed'), prevent_initial_call=True ) def sider_custom_trigger_demo(nClicks, collapsed): if nClicks: return not collapsed return dash.no_update'''), title='点击查看代码', is_open=False, ghost=True) ],
'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),
title='点击查看代码', is_open=False, ghost=True) ], id='配合AntdIcon添加图标', style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, className='div-highlight'), html.Div( [ fac.AntdButton('点我点我', type='primary', id='button-demo'), html.Br(), fac.AntdSpin(html.Em(id='button-demo-output'), text='回调中'), fac.AntdDivider( '回调示例', innerTextOrientation='left', lineColor='#f0f0f0'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdButton('点我点我', type='primary', id='button-demo'), html.Br(), html.Em(id='button-demo-output') ... @app.callback( Output('button-demo-output', 'children'), Input('button-demo', 'nClicks'),
'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('处于回调中状态时,都会触发加载动画过程'),
}, id='图片编辑功能', className='div-highlight' ), html.Div( [ fac.AntdPictureUpload( id='picture-upload-demo', apiUrl='/upload/', fileMaxSize=1, buttonContent='点击上传图片' ), fac.AntdSpin( html.Pre(id='picture-upload-demo-output'), text='回调中' ), 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) ], id='segmented-demo', defaultValue='选项1' ), fac.AntdSpin( fac.AntdText( id='segmented-demo-output' ), text='回调中' ), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows',
[ fac.AntdSpin([ fac.AntdRate(id='rate-demo', count=10, allowHalf=True), html.Br(), fac.AntdText('value: ', strong=True), fac.AntdText(id='rate-demo-output') ], text='回调中'), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpin( [ fac.AntdRate(id='rate-demo', count=10, allowHalf=True), html.Br(), fac.AntdText('value: ', strong=True), fac.AntdText(id='rate-demo-output') ], text='回调中' ) ... @app.callback( Output('rate-demo-output', 'children'), Input('rate-demo', 'value'), prevent_initial_call=True ) def rate_demo_callback(value): return value '''), title='点击查看代码', is_open=False, ghost=True) ],
'children': [ { 'title': '天府新区', 'key': '天府新区' } ] } ] } ], multiple=True, checkable=True ), fac.AntdSpin( html.Div(id='tree-demo-output'), text='回调中' ), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString='''
[ fac.AntdSpin(fac.AntdSpace(id='pagination-demo-output', direction='vertical'), text='回调中'), fac.AntdPagination(id='pagination-demo', defaultPageSize=10, total=100, pageSizeOptions=[5, 10, 20]), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpin( fac.AntdSpace( id='pagination-demo-output', direction='vertical' ), text='回调中' ), fac.AntdPagination( id='pagination-demo', defaultPageSize=10, total=100, pageSizeOptions=[5, 10, 20] ) ... @app.callback( Output('pagination-demo-output', 'children'), [Input('pagination-demo', 'current'), Input('pagination-demo', 'pageSize')] ) def pagination_callback_demo(current, pageSize): return [ fac.AntdText(f'内容项{i}') for i in range((current - 1) * pageSize, current * pageSize) ] '''), title='点击查看代码', is_open=False, ghost=True) ],