}), style={'marginBottom': '10px'}), html.Div( [ fac.AntdPageHeader(title='页头标题示例', subTitle='页头副标题示例'), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph( [fac.AntdText(' 最基础的页头包含了自带浏览器后退功能的返回按钮、主标题及副标题信息')]), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdPageHeader( title='页头标题示例', subTitle='页头副标题示例' ) '''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight'), html.Div(
fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' html.Div( [ fac.AntdAlert(message='这是一条alert测试') ] )''' ), title='点击查看代码', is_open=False, ghost=True ) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用',
'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdResult(title='结果页示例', subTitle='这是一段结果页示例文字说明'), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdResult( title='结果页示例', subTitle='这是一段结果页示例文字说明' )'''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight'), html.Div(
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'
fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdPopover( fac.AntdButton( '请将鼠标悬浮于此', type='primary' ), title='这是一段AntdTooltip提示示例', content=[ fac.AntdParagraph( [ fac.AntdText(' 配合'), fac.AntdText('AntdPopover', strong=True), fac.AntdText('的'), fac.AntdText('content', code=True), fac.AntdText('参数,可实现比'), fac.AntdText('AntdTooltip', strong=True), fac.AntdText('更加丰富自由的提示框内容渲染') ] ) ], overlayStyle={ 'width': '350px' } )'''), title='点击查看代码', is_open=False, ghost=True)
fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdDivider('默认无边框', innerTextOrientation='left'), fac.AntdDescriptions( [ fac.AntdDescriptionItem( '费弗里', label='姓名' ), fac.AntdDescriptionItem( html.A( 'https://github.com/CNFeffery', href='https://github.com/CNFeffery' ), label='个人Github地址' ), fac.AntdDescriptionItem( html.A( 'https://www.cnblogs.com/feffery/', href='https://www.cnblogs.com/feffery/' ), label='个人博客地址' ), fac.AntdDescriptionItem( html.A( 'http://fac.feffery.tech/', href='http://fac.feffery.tech/' ), label='fac框架官网' ) ], title='描述列表示例', labelStyle={ 'fontWeight': 'bold' } ), fac.AntdDivider('添加边框', innerTextOrientation='left'), fac.AntdDescriptions( [ fac.AntdDescriptionItem( '费弗里', label='姓名' ), fac.AntdDescriptionItem( html.A( 'https://github.com/CNFeffery', href='https://github.com/CNFeffery' ), label='个人Github地址' ), fac.AntdDescriptionItem( html.A( 'https://www.cnblogs.com/feffery/', href='https://www.cnblogs.com/feffery/' ), label='个人博客地址' ), fac.AntdDescriptionItem( html.A( 'http://fac.feffery.tech/', href='http://fac.feffery.tech/' ), label='fac框架官网' ) ], title='描述列表示例', bordered=True, labelStyle={ 'fontWeight': 'bold' } ) '''), title='点击查看代码', is_open=False, ghost=True)
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 ) ],
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)
'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdDivider(), fac.AntdDivider(isDashed=True), fac.AntdDivider('常规的实线与虚线分割线', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdDivider(), fac.AntdDivider(isDashed=True)'''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='常规的实线与虚线分割线', className='div-highlight'), html.Div( [
]), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdMentions( options=[ { 'label': '费弗里', 'value': '费弗里' }, { 'label': '小A', 'value': '小A' }, { 'label': 'liz', 'value': 'liz' } ], style={ 'width': '400px' } ) '''), title='点击查看代码', is_open=False, ghost=True) ],
style={'marginBottom': '10px'}), html.Div( [ fac.AntdTitle('整星选择:', level=5), fac.AntdRate(count=10), fac.AntdTitle('半星选择:', level=5), fac.AntdRate(count=10, allowHalf=True), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdTitle('整星选择:', level=5), fac.AntdRate(count=10), fac.AntdTitle('半星选择:', level=5), fac.AntdRate(count=10, allowHalf=True) '''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight'), html.Div(
), fac.AntdDivider( '基础使用及单文件大小限制', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdPictureUpload( apiUrl='/upload/', fileMaxSize=1 )''' ), title='点击查看代码', is_open=False, ghost=True ) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用及单文件大小限制',
fac.AntdButton('dashed', type='dashed'), fac.AntdButton('link', type='link'), fac.AntdButton('text', type='text') ]), fac.AntdDivider('不同type对应按钮样式风格', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' html.Div( [ fac.AntdButton('default'), fac.AntdButton('primary', type='primary'), fac.AntdButton('dashed', type='dashed'), fac.AntdButton('link', type='link'), fac.AntdButton('text', type='text') ] )'''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='不同type对应按钮样式风格',
}]), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdTimeline( items=[ { 'content': '训练数据导入' }, { 'content': '模型训练' }, { 'content': '模型持久化' }, { 'content': '模型发布' } ] ) '''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px',
fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdTabs( [ fac.AntdTabPane( html.Div( '标签页1测试', style={ 'backgroundColor': 'rgba(241, 241, 241, 0.4)', 'height': '200px', 'display': 'flex', 'justifyContent': 'center', 'alignItems': 'center' } ), tab='标签页1', key='标签页1' ), fac.AntdTabPane( html.Div( fac.AntdButton('标签页2测试', type='primary'), style={ 'backgroundColor': 'rgba(241, 241, 241, 0.4)', 'height': '200px', 'display': 'flex', 'justifyContent': 'center', 'alignItems': 'center' } ), tab='标签页2', key='标签页2' ), fac.AntdTabPane( html.Div( fac.AntdButton('标签页3测试', type='dashed'), style={ 'backgroundColor': 'rgba(241, 241, 241, 0.4)', 'height': '200px', 'display': 'flex', 'justifyContent': 'center', 'alignItems': 'center' } ), tab='标签页3', key='标签页3' ) ] )''' ), title='点击查看代码', is_open=False, ghost=True )
'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdSwitch(), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString='''fac.AntdSwitch()'''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight'), html.Div( [ fac.AntdSwitch(checkedChildren='打开', unCheckedChildren='关闭'),
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',
style={'marginBottom': '10px'}), html.Div( [ fac.AntdCountdown(title='倒计时示例', value='2099-12-31 00:00:00', format='还剩Y年M月D天H小时m分s秒'), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdCountdown( title='倒计时示例', value='2099-12-31 00:00:00', format='还剩Y年M月D天H小时m分s秒' ) '''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight'),
'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdTimeRangePicker(allowClear=True), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdTimeRangePicker( allowClear=True ) '''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight'), html.Div(
[ fac.AntdDivider('size="default"(默认)', innerTextOrientation='left'), fac.AntdCalendar(), fac.AntdDivider('size="large"', innerTextOrientation='left'), fac.AntdCalendar(size='large'), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdDivider('size="default"(默认)', innerTextOrientation='left'), fac.AntdCalendar(), fac.AntdDivider('size="large"', innerTextOrientation='left'), fac.AntdCalendar( size='large' ) '''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用', className='div-highlight'),
fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdWatermark( html.Div( style={ 'height': '500px', 'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)', 'marginBottom': '25px' } ), content='水印内容测试', fontSize=28 ), fac.AntdWatermark( html.Div( fac.AntdForm( [ fac.AntdFormItem( fac.AntdInput( autoComplete='off' ), label='用户名' ), fac.AntdFormItem( fac.AntdInput( mode='password' ), label='密码' ), fac.AntdFormItem( fac.AntdCheckbox( label='记住密码' ), wrapperCol={ 'offset': 4 } ), fac.AntdFormItem( fac.AntdButton( '登录', type='primary' ), wrapperCol={ 'offset': 4 } ) ], labelCol={ 'span': 4 }, wrapperCol={ 'span': 8 } ), style={ 'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)', 'padding': '25px' } ), content='水印内容测试', fontSize=22, rotate=22, gapX=50, gapY=50 )''' ), title='点击查看代码', is_open=False, ghost=True )
offsetTop=100), style={'marginBottom': '1000px'}), fac.AntdDivider('下滑固钉示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' html.Div( fac.AntdAffix( fac.AntdButton( '向下滑动页面体验固钉效果', type='primary' ), offsetTop=100 ), style={ 'marginBottom': '1000px' } ) '''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0'
'基础使用', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSegmented( options=[ { 'label': f'选项{i}', 'value': f'选项{i}' } for i in range(5) ], defaultValue='选项1' )''' ), title='点击查看代码', is_open=False, ghost=True ) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px',
fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdInput( size='small', placeholder='基础的输入框', style={ 'width': '200px', 'marginBottom': '5px' } ), html.Br(), fac.AntdInput( size='middle', placeholder='基础的输入框', style={ 'width': '200px', 'marginBottom': '5px' } ), html.Br(), fac.AntdInput( size='large', placeholder='基础的输入框', style={ 'width': '200px', 'marginBottom': '5px' } )'''), title='点击查看代码', is_open=False, ghost=True)
value=1332971), value=f'option{i}') for i in range(4) ]), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdCheckCardGroup( [ fac.AntdCheckCard( fac.AntdStatistic( title='统计数值示例', value=1332971 ), value=f'option{i}' ) for i in range(4) ] )'''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0'
'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdDateRangePicker(), fac.AntdDivider('基础的日期范围选择控件', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString='''fac.AntdDateRangePicker()'''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础的日期范围选择控件', className='div-highlight'), html.Div( [ fac.AntdDateRangePicker(showTime=True),
innerTextOrientation='left' ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdSelect( placeholder='请选择国家:', options=[ {'label': '中国', 'value': '中国'}, {'label': '美国', 'value': '美国'}, {'label': '俄罗斯', 'value': '俄罗斯'}, {'label': '德国', 'value': '德国', 'disabled': True}, {'label': '加拿大', 'value': '加拿大'} ], style={ # 使用css样式固定宽度 'width': '200px' } )''' ), title='点击查看代码', is_open=False, ghost=True ) ], style={
[ fac.AntdDraggerUpload(apiUrl='/upload/', fileMaxSize=1, text='拖拽上传示例', hint='点击或拖拽文件至此处进行上传'), fac.AntdDivider('基础使用及单文件大小限制', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdDraggerUpload( apiUrl='/upload/', fileMaxSize=1, text='拖拽上传示例', hint='点击或拖拽文件至此处进行上传' )'''), title='点击查看代码', is_open=False, ghost=True) ], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='基础使用及单文件大小限制', className='div-highlight'),
fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdTree( treeData=[ { 'title': '重庆市', 'key': '重庆市', 'children': [ { 'title': '渝北区', 'key': '渝北区' }, { 'title': '江北区', 'key': '江北区', 'disabled': True } ] }, { 'title': '北京市', 'key': '北京市', 'children': [ { 'title': '西城区', 'key': '西城区' }, { 'title': '东城区', 'key': '东城区' } ] }, { 'title': '四川省', 'key': '四川省', 'children': [ { 'title': '成都市', 'key': '成都市', 'children': [ { 'title': '天府新区', 'key': '天府新区' } ] } ] } ] )''' ), title='点击查看代码', is_open=False, ghost=True )
fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' html.Div( [ fac.AntdAnchor( linkDict=[ {'title': '示例2-1', 'href': '#示例2-1'}, {'title': '示例2-1-1', 'href': '#示例2-1-1'}, {'title': '示例2-1-2', 'href': '#示例2-1-2'}, {'title': '示例2-2', 'href': '#示例2-2'}, ], align='right', containerId='anchor-container-demo', targetOffset=100 ), html.Div( [ html.H5('示例2-1', id='示例2-1', style={'marginBottom': '800px'}), html.H5('示例2-1-1', id='示例2-1-1', style={'marginBottom': '800px'}), html.H5('示例2-1-2', id='示例2-1-2', style={'marginBottom': '800px'}), html.H5('示例2-2', id='示例2-2', style={'marginBottom': '800px'}), ] ) ], id='anchor-container-demo', style={ 'maxHeight': '500px', 'overflowY': 'auto', 'position': 'relative', 'backgroundColor': 'rgba(240, 240, 240, 0.2)', 'padding': '20px' } )''' ), title='点击查看代码', is_open=False, ghost=True )