docs_content = html.Div([ html.Div([ html.H2('AntdRibbon(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/AntdRibbon.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.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'), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([fac.AntdText(' 缎带的使用很简单,主要用于装饰div盒子')]), 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' ) '''), 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': '#基础使用' }, ] }, ], offsetTop=0), style={ 'flex': 'none', 'margin': '20px' }) ],
[ fac.AntdSpace([ fac.AntdButton([ fac.AntdIcon(icon='md-power-settings-new'), 'md-power-settings-new' ]), fac.AntdButton( [fac.AntdIcon(icon='md-layers'), 'md-layers'], type='primary'), fac.AntdButton( [fac.AntdIcon(icon='fc-repair'), 'fc-repair'], type='dashed') ]), fac.AntdDivider('配合AntdIcon添加图标', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdButton( [ fac.AntdIcon( icon='md-power-settings-new' ), 'md-power-settings-new' ] ), fac.AntdButton( [ fac.AntdIcon( icon='md-layers' ), 'md-layers' ], type='primary' ), fac.AntdButton( [ fac.AntdIcon( icon='fc-repair' ), 'fc-repair' ], type='dashed' ) ] )'''), title='点击查看代码', is_open=False, ghost=True) ],
'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([ fac.AntdText(' 本回调示例出于对服务器网络安全的考虑使用了'), fac.AntdText('浏览器端回调', strong=True) ]), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python',
[ fac.AntdSpace([ fac.AntdPopover(fac.AntdButton('hover事件', type='primary'), title='这是一段AntdTooltip提示示例'), fac.AntdPopover(fac.AntdButton('click事件', type='primary'), title='这是一段AntdTooltip提示示例', trigger='click'), fac.AntdPopover(fac.AntdInput(placeholder='focus事件', style={'width': '150px'}), title='这是一段AntdTooltip提示示例', trigger='focus') ], direction='vertical'), fac.AntdDivider('不同的触发行为', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdPopover( fac.AntdButton( 'hover事件', type='primary' ), title='这是一段AntdTooltip提示示例' ), fac.AntdPopover( fac.AntdButton( 'click事件', type='primary' ), title='这是一段AntdTooltip提示示例', trigger='click' ), fac.AntdPopover( fac.AntdInput( placeholder='focus事件', style={ 'width': '150px' } ), title='这是一段AntdTooltip提示示例', trigger='focus' ) ], direction='vertical' )'''), title='点击查看代码', is_open=False, ghost=True) ],
simple=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.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(
[ 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 ) ],
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',
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='''
'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight'), html.Div( [ fac.AntdPopconfirm(fac.AntdButton('点击触发', type='primary'), id='popconfirm-demo', title='气泡确认测试'), html.Br(), fac.AntdSpace([ html.Div([ fac.AntdText('confirmCounts:', strong=True), fac.AntdText(id='popconfirm-demo-output-1') ]), html.Div([ fac.AntdText('cancelCounts:', strong=True), fac.AntdText(id='popconfirm-demo-output-2') ]) ], direction='vertical'), 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(
[ fac.AntdSpace( [ fac.AntdCascader( placeholder='placement="bottomRight"', 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' } ] } ] } ], placement='bottomRight', style={ 'width': '300px' } ), fac.AntdCascader( placeholder='placement="topLeft"', 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' } ] } ] } ], placement='topLeft', style={ 'width': '300px' } ), fac.AntdCascader( placeholder='placement="topRight"', 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' } ] } ] } ], placement='topRight', style={ 'width': '300px' } ) ] ), fac.AntdDivider( '不同的悬浮层展开方位', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdCascader( placeholder='placement="bottomRight"', 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' } ] } ] } ], placement='bottomRight', style={ 'width': '300px' } ), fac.AntdCascader( placeholder='placement="topLeft"', 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' } ] } ] } ], placement='topLeft', style={ 'width': '300px' } ), fac.AntdCascader( placeholder='placement="topRight"', 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' } ] } ] } ], placement='topRight', style={ 'width': '300px' } ) ] )''' ), title='点击查看代码', is_open=False, ghost=True ) ],
[ html.Div( [ html.H2( 'AntdBadge(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/AntdBadge.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.AntdSpace( [ fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=6 ), fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=56, overflowCount=50 ), fac.AntdBadge( fac.AntdAvatar( mode='image', shape='square', src='/assets/imgs/avatar-demo.jpg' ), dot=True ), fac.AntdBadge( fac.AntdIcon( icon='fc-advertising', style={ 'fontSize': '40px' } ), count=6 ), fac.AntdBadge( fac.AntdIcon( icon='fc-advertising', style={ 'fontSize': '40px' } ), count=56, overflowCount=50 ), fac.AntdBadge( fac.AntdIcon( icon='fc-advertising', style={ 'fontSize': '40px' } ), dot=True ), fac.AntdBadge( fac.AntdIcon( icon='fc-advertising', style={ 'fontSize': '40px' } ), dot=True, offset=[-8, 6] ) ], size=20 ), fac.AntdDivider( '常规的角标式徽标', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdParagraph( [ fac.AntdText(' 徽标最常规的用法是给其'), fac.AntdText('children', code=True), fac.AntdText('参数所传入的元素添加角标形式的徽标数,主要用于'), fac.AntdText('AntdIcon', code=True), fac.AntdText('、'), fac.AntdText('AntdAvatar', code=True), fac.AntdText('等组件') ] ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=6 ), fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=56, overflowCount=50 ), fac.AntdBadge( fac.AntdAvatar( mode='image', shape='square', src='/assets/imgs/avatar-demo.jpg' ), dot=True ), fac.AntdBadge( fac.AntdIcon( icon='fc-advertising', style={ 'fontSize': '40px' } ), count=6 ), fac.AntdBadge( fac.AntdIcon( icon='fc-advertising', style={ 'fontSize': '40px' } ), count=56, overflowCount=50 ), fac.AntdBadge( fac.AntdIcon( icon='fc-advertising', style={ 'fontSize': '40px' } ), dot=True ), fac.AntdBadge( fac.AntdIcon( icon='fc-advertising', style={ 'fontSize': '40px' } ), dot=True, offset=[-8, 6] ) ], size=20 ) ''' ), 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.AntdDivider('size="default"(默认)', innerTextOrientation='left'), fac.AntdSpace( [ fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=6, color='yellow' ), fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=56, overflowCount=50, color='orange' ), fac.AntdBadge( fac.AntdAvatar( mode='image', shape='square', src='/assets/imgs/avatar-demo.jpg' ), dot=True, color='cyan' ) ], size=20 ), fac.AntdDivider('size="small"', innerTextOrientation='left'), fac.AntdSpace( [ fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=6, color='yellow', size='small' ), fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=56, overflowCount=50, color='orange', size='small' ), fac.AntdBadge( fac.AntdAvatar( mode='image', shape='square', src='/assets/imgs/avatar-demo.jpg' ), dot=True, color='cyan', size='small' ) ], size=20 ), 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.AntdSpace( [ fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=6, color='yellow' ), fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=56, overflowCount=50, color='orange' ), fac.AntdBadge( fac.AntdAvatar( mode='image', shape='square', src='/assets/imgs/avatar-demo.jpg' ), dot=True, color='cyan' ) ], size=20 ), fac.AntdDivider('size="small"', innerTextOrientation='left'), fac.AntdSpace( [ fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=6, color='yellow', size='small' ), fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=56, overflowCount=50, color='orange', size='small' ), fac.AntdBadge( fac.AntdAvatar( mode='image', shape='square', src='/assets/imgs/avatar-demo.jpg' ), dot=True, color='cyan', size='small' ) ], size=20 ) ''' ), 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.AntdBadge(count=8), fac.AntdBadge(count=101), fac.AntdBadge(count=101, size='small'), fac.AntdBadge(dot=True, status='success'), fac.AntdBadge(dot=True, status='error'), fac.AntdBadge(dot=True, status='default'), fac.AntdBadge(dot=True, status='processing'), fac.AntdBadge(dot=True, status='warning'), ], size=20 ), fac.AntdDivider( '独立使用的徽标', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdParagraph( [ fac.AntdText(' 当'), fac.AntdText('AntdBadge', strong=True), fac.AntdText('不传入'), fac.AntdText('children', code=True), fac.AntdText('参数时,可独立使用,'), fac.AntdText('注意!', strong=True), fac.AntdText('status="processing"', code=True), fac.AntdText('仅徽标独立使用时可用,否则会出现显示异常') ] ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdBadge(count=8), fac.AntdBadge(count=101), fac.AntdBadge(count=101, size='small'), fac.AntdBadge(dot=True, status='success'), fac.AntdBadge(dot=True, status='error'), fac.AntdBadge(dot=True, status='default'), fac.AntdBadge(dot=True, status='processing'), fac.AntdBadge(dot=True, status='warning'), ], size=20 ) ''' ), 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( '计数随机递增', 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' ), id='badge-demo-2', count=0, dot=True ) ], size=20 ), 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( '计数随机递增', 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' ), id='badge-demo-2', count=0, dot=True ) ], size=20 ) ... import random @app.callback( [Output('badge-demo-1', 'count'), Output('badge-demo-2', 'count')], Input('badge-demo-generate', 'nClicks'), [State('badge-demo-1', 'count'), State('badge-demo-2', 'count')], prevent_initial_call=True ) def badge_callback_demo(nClicks, count1, count2): return count1 + random.randint(1, 10), count2 + random.randint(1, 10) ''' ), 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.AntdAlert( type='info', showIcon=True, message='请你在点击【创建新一局游戏】后,以最快的速度对下方具有红点徽标的3个头像进行点击,全部耗时(单位:秒)即为你的成绩!', messageRenderMode='marquee', style={ 'marginBottom': '5px' } ), fac.AntdButton( '创建新一局游戏', id='badge-click-demo-reset', type='primary' ), fac.AntdDivider(), dcc.Store(id='badge-click-demo-start-time'), html.Div( id='badges-area', style={ 'display': 'flex', 'justifyContent': 'center' } ), html.Div( id='badge-click-demo-score', style={ 'display': 'flex', 'justifyContent': 'center' } ), fac.AntdDivider( '利用点击事件实现更多交互', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdParagraph( [ fac.AntdText(' 当徽标或其包裹的子元素被点击时,都会触发更新'), fac.AntdText('nClicks', code=True), fac.AntdText('参数,从而帮助你实现更多回调交互效果') ] ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdAlert( type='info', showIcon=True, message='请你在点击【创建新一局游戏】后,以最快的速度对下方具有红点徽标的3个头像进行点击,全部耗时(单位:秒)即为你的成绩!', messageRenderMode='marquee', style={ 'marginBottom': '5px' } ), fac.AntdButton( '创建新一局游戏', id='badge-click-demo-reset', type='primary' ), fac.AntdDivider(), dcc.Store(id='badge-click-demo-start-time'), html.Div( id='badges-area', style={ 'display': 'flex', 'justifyContent': 'center' } ), html.Div( id='badge-click-demo-score', style={ 'display': 'flex', 'justifyContent': 'center' } ) ... @app.callback( [Output('badges-area', 'children'), Output('badge-click-demo-start-time', 'data')], Input('badge-click-demo-reset', 'nClicks'), prevent_initial_call=True ) def badge_click_demo_callback1(nClicks): badges_count = [1] * 3 + [0] * 7 random.shuffle(badges_count) return [ fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg', style={ 'cursor': 'pointer' } ), id={ 'type': 'badge-click-demo', 'index': idx }, count=c, dot=True, style={ 'cursor': 'pointer' } ) for idx, c in enumerate(badges_count) ], { 'start-time': time.time() } @app.callback( Output({'type': 'badge-click-demo', 'index': MATCH}, 'count'), Input({'type': 'badge-click-demo', 'index': MATCH}, 'nClicks'), State({'type': 'badge-click-demo', 'index': MATCH}, 'count'), prevent_initial_call=True ) def badge_click_demo_callback2(nClicks, count_): return 0 if count_ != 0 else dash.no_update @app.callback( Output('badge-click-demo-score', 'children'), Input({'type': 'badge-click-demo', 'index': ALL}, 'count'), State('badge-click-demo-start-time', 'data'), prevent_initial_call=True ) def badge_click_demo_callback3(counts, start_time): if sum(counts) == 0: return fac.AntdParagraph( [ fac.AntdText('你的得分:', strong=True), fac.AntdText('%s秒' % round(time.time() - start_time['start-time'], 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': '#不同尺寸与颜色'}, {'title': '独立使用的徽标', 'href': '#独立使用的徽标'}, {'title': '动态计数效果', 'href': '#动态计数效果'}, {'title': '利用点击事件实现更多交互', 'href': '#利用点击事件实现更多交互'}, ] }, ], offsetTop=0 ), style={ 'flex': 'none', 'margin': '20px' } ) ],
[ fac.AntdSpace( [ fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=6 ), fac.AntdBadge( fac.AntdAvatar( mode='image', shape='square', src='/assets/imgs/avatar-demo.jpg' ), dot=True ) ], size=20 ), fac.AntdDivider( '添加徽标', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdBadge( fac.AntdAvatar( mode='image', src='/assets/imgs/avatar-demo.jpg' ), count=6 ), fac.AntdBadge( fac.AntdAvatar( mode='image', shape='square', src='/assets/imgs/avatar-demo.jpg' ), dot=True ) ], size=20 ) ''' ), title='点击查看代码', is_open=False, ghost=True ) ],
[ fac.AntdSpace([ fac.AntdDropdown(title=placement, arrow=True, placement=placement, menuItems=[{ 'title': '子页面1' }, { 'title': '子页面2' }, { 'isDivider': True }, { 'title': '子页面3-1' }, { 'title': '子页面3-2' }]) for placement in [ 'bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight' ] ], size=20), fac.AntdDivider('不同的弹出方位', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdDropdown( title=placement, arrow=True, placement=placement, menuItems=[ { 'title': '子页面1' }, { 'title': '子页面2' }, { 'isDivider': True }, { 'title': '子页面3-1' }, { 'title': '子页面3-2' } ] ) for placement in [ 'bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'] ], size=20 ) '''), title='点击查看代码', is_open=False, ghost=True) ],
[ 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) ],
[ 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.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' 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') ] ) ... @app.callback( Output('input-value-demo-output', 'children'), Input('input-value-demo', 'value'), prevent_initial_call=True ) def input_value_callback_demo(value): return fac.AntdText(f'value: {value}', italic=True) @app.callback( Output('input-nSubmit-demo-output', 'children'), Input('input-nSubmit-demo', 'nSubmit'), State('input-nSubmit-demo', 'value'), prevent_initial_call=True ) def input_nSubmit_callback_demo(nSubmit, value): if nSubmit and value: return fac.AntdText(f'nSubmit: {nSubmit} value: {value}', italic=True) @app.callback( Output('input-nClicksSearch-demo-output', 'children'), Input('input-nClicksSearch-demo', 'nClicksSearch'), State('input-nClicksSearch-demo', 'value'), prevent_initial_call=True ) def input_nClicksSearch_callback_demo(nClicksSearch, value): if nClicksSearch and value: return fac.AntdText(f'nClicksSearch: {nClicksSearch} value: {value}', italic=True)''' ), title='点击查看代码', is_open=False, ghost=True) ],
likesCount=1 ), 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( '回调示例',
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([ '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.AntdDivider('默认水平方向', innerTextOrientation='left'), fac.AntdSpace( [ html.Div( style={ 'backgroundColor': 'rgba(64, 173, 255, 1)', 'height': '50px', 'width': '50px' } ), html.Div( style={ 'backgroundColor': 'rgba(0, 146, 255, 1)', 'height': '50px', 'width': '50px' } ), html.Div( style={ 'backgroundColor': 'rgba(64, 173, 255, 1)', 'height': '50px', 'width': '50px' } ) ] ), fac.AntdDivider('竖直方向', innerTextOrientation='left'),
[ 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 ) ],
ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight'), html.Div( [ fac.AntdDivider('内置色彩风格', innerTextOrientation='left'), fac.AntdSpace([ fac.AntdTag(content=color, color=color) for color in [ 'magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple' ] ], direction='vertical'), fac.AntdDivider('自定义色彩风格', innerTextOrientation='left'), fac.AntdSpace([ fac.AntdTag(content=color, color=color) for color in ['#f50', '#2db7f5', '#87d068', '#108ee9'] ], direction='vertical'), fac.AntdDivider('不同的色彩风格', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True,
[ fac.AntdSpace( [ fac.AntdSegmented( options=[ { 'label': f'选项{i}', 'value': f'选项{i}' } for i in range(5) ], defaultValue='选项1', size='small' ), fac.AntdSegmented( options=[ { 'label': f'选项{i}', 'value': f'选项{i}' } for i in range(5) ], defaultValue='选项1' ), fac.AntdSegmented( options=[ { 'label': f'选项{i}', 'value': f'选项{i}' } for i in range(5) ], defaultValue='选项1', size='large' ) ], direction='vertical' ), fac.AntdDivider( '不同的尺寸规格', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdSegmented( options=[ { 'label': f'选项{i}', 'value': f'选项{i}' } for i in range(5) ], defaultValue='选项1', size='small' ), fac.AntdSegmented( options=[ { 'label': f'选项{i}', 'value': f'选项{i}' } for i in range(5) ], defaultValue='选项1' ), fac.AntdSegmented( options=[ { 'label': f'选项{i}', 'value': f'选项{i}' } for i in range(5) ], defaultValue='选项1', size='large' ) ], direction='vertical' )''' ), title='点击查看代码', is_open=False, ghost=True ) ],
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', codeString=''' fac.AntdPageHeader(
[ fac.AntdSpace([ fac.AntdResult(status=status, title=f'status="{status}"') for status in [ 'success', 'info', 'error', 'warning', '404', '403', '500' ] ], direction='vertical', addSplitLine=True, style={'width': '100%'}), fac.AntdDivider('其他内置状态示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdResult( status=status, title=f'status="{status}"' ) for status in [ 'success', 'info', 'error', 'warning', '404', '403', '500' ] ], direction='vertical', addSplitLine=True, style={ 'width': '100%' } )'''), title='点击查看代码', is_open=False, ghost=True) ],
docs_content = html.Div([ html.Div([ html.H2( 'AntdCheckCard(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/AntdCheckCard.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.AntdSpace([ fac.AntdCheckCard(fac.AntdText('选择卡片示例' * 10)), fac.AntdCheckCard( fac.AntdStatistic(title='统计数值示例', value=1332971)), fac.AntdCheckCard( html.Div([ html.Div(fac.AntdAvatar( mode='image', size=48, src='/assets/imgs/avatar-demo.jpg'), style={ 'flex': 'none', 'marginRight': '10px' }), html.Div(fac.AntdText('选择卡片示例' * 10), style={'flex': 'auto'}) ], style={'display': 'flex'})) ], direction='vertical'), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([ fac.AntdText(' '), fac.AntdText('AntdCheckCard', code=True), fac.AntdText('中可自由嵌套其它任意元素') ]), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSpace( [ fac.AntdCheckCard( fac.AntdText( '选择卡片示例' * 10 ) ), fac.AntdCheckCard( fac.AntdStatistic( title='统计数值示例', value=1332971 ) ), fac.AntdCheckCard( html.Div( [ html.Div( fac.AntdAvatar( mode='image', size=48, src='/assets/imgs/avatar-demo.jpg' ), style={ 'flex': 'none', 'marginRight': '10px' } ), html.Div( fac.AntdText( '选择卡片示例' * 10 ), style={ 'flex': 'auto' } ) ], style={ 'display': 'flex' } ) ) ], direction='vertical' ) '''), 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.AntdCheckCard(fac.AntdText('选择卡片示例' * 10), id='check-card-demo'), fac.AntdParagraph([ fac.AntdText('checked: '), fac.AntdText(id='check-card-demo-output') ]), fac.AntdDivider( '回调示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdCheckCard( fac.AntdText( '选择卡片示例' * 10 ), id='check-card-demo' ), fac.AntdParagraph( [ fac.AntdText('checked: '), fac.AntdText(id='check-card-demo-output') ] ) ... @app.callback( Output('check-card-demo-output', 'children'), Input('check-card-demo', 'checked') ) def check_card_demo_callback(checked): return str(checked) '''), 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' }) ],