def input_md5_demo(value, md5Value): if value: return [ fac.AntdText('value: ', strong=True), value, html.Br(), fac.AntdText('md5Value: ', strong=True), md5Value ]
def icon_demo_render_callback(value): return [ fac.AntdCol( html.Div( [ fac.AntdIcon( icon=icon, style={ 'fontSize': '28px', 'marginRight': '5px' } ), fac.AntdText( icon, copyable=True ) ], style={ 'display': 'flex', 'alignItems': 'center' } ), span=6 ) for icon in Config.all_icons if re.findall(f'^{value}-', icon) == [value + '-'] ]
def input_number_callback(nSubmit1, nSubmit2, value1, value2): return [ html.Div([ fac.AntdText('常规模式value:', strong=True), fac.AntdText(str(value1)) ]), html.Div([ fac.AntdText('常规模式value类型:', strong=True), fac.AntdText(str(type(value1))) ]), fac.AntdDivider(), html.Div([ fac.AntdText('高精度模式value:', strong=True), fac.AntdText(str(value2)) ]), html.Div([ fac.AntdText('高精度模式value类型:', strong=True), fac.AntdText(str(type(value2))) ]) ]
id='使用示例', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' }), style={'marginBottom': '10px'}), html.Div( [ fac.AntdPageHeader(title='页头标题示例', subTitle='页头副标题示例'), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph( [fac.AntdText(' 最基础的页头包含了自带浏览器后退功能的返回按钮、主标题及副标题信息')]), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdPageHeader( title='页头标题示例', subTitle='页头副标题示例' ) '''), title='点击查看代码', is_open=False, ghost=True) ],
# 注入快捷添加好友悬浮卡片 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={ 'width': '300px', 'height': '408px' }) ], style={ 'position': 'fixed', 'right': '100px', 'bottom': '200px',
'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='多选模式', className='div-highlight'), html.Div( [ fac.AntdDivider('单选模式', innerTextOrientation='left'), fac.AntdCheckCardGroup([ fac.AntdCheckCard(fac.AntdStatistic(title='统计数值示例', value=1332971), value=f'option{i}') for i in range(4) ], id='check-card-group-demo1'), fac.AntdParagraph([ fac.AntdText('value: '), fac.AntdText(id='check-card-group-demo1-output') ]), fac.AntdDivider('多选模式', innerTextOrientation='left'), fac.AntdCheckCardGroup([ fac.AntdCheckCard(fac.AntdStatistic(title='统计数值示例', value=1332971), value=f'option{i}') for i in range(4) ], id='check-card-group-demo2', multiple=True), fac.AntdParagraph([ fac.AntdText('value: '), fac.AntdText(id='check-card-group-demo2-output') ]), fac.AntdDivider(
[ 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',
content='水印内容测试', fontSize=22, rotate=22, gapX=50, gapY=50 ), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdParagraph( [ fac.AntdText(' '), fac.AntdText('AntdWatermark', code=True), fac.AntdText('可为嵌套进其中的子元素覆盖上自定义水印文字内容,适用于敏感信息页面的防泄密') ] ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdWatermark( html.Div( style={
'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.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'
], style={ 'marginBottom': '40px', 'padding': '10px 10px 20px 10px', 'border': '1px solid #f0f0f0' }, id='为各个等级设置说明提示', className='div-highlight'), html.Div( [ fac.AntdRate( count=10, defaultValue=7.5, allowHalf=True, disabled=True), fac.AntdDivider( '只读模式', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([ fac.AntdText(' 设置参数'), fac.AntdText('defaultValue', code=True), fac.AntdText('及'), fac.AntdText('disabled=True', code=True), fac.AntdText('之后,即等价于'), fac.AntdText('只读模式', strong=True), fac.AntdText(',适合单纯的星级展示') ]), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdRate( count=10,
'fontWeight': 'bold', 'fontSize': '1.2rem' } ), fmc.FefferyMarkdown( markdownStr=open('documents/AntdSider.md', encoding='utf-8').read() ), html.Ul( [ html.Li( fac.AntdParagraph( [ fac.AntdText('有关'), fac.AntdText('AntdSider', strong=True), fac.AntdText('的使用示例请移步'), fac.AntdText('AntdLayout', strong=True), fac.AntdText('对应的文档'), ], style={ 'paddingTop': '20px' } ), style={'listStyleType': 'circle'} ) ] ), html.Div(style={'height': '100px'})
[ fac.AntdMentions(options=[{ 'label': '费弗里', 'value': '费弗里' }, { 'label': '小A', 'value': '小A' }, { 'label': 'liz', 'value': 'liz' }], style={'width': '400px'}), fac.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([ fac.AntdText(' 输入'), fac.AntdText('prefix', code=True), fac.AntdText('参数指定的子项层触发字符(默认为'), fac.AntdText('"@"', code=True), fac.AntdText('),即可选择需要在此处提及的对象进行插入') ]), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdMentions( options=[ { 'label': '费弗里',
def calendar_demo_callback(value): return [ fac.AntdText('value: ', strong=True), fac.AntdText(value) ]
'content': '训练数据导入', 'icon': 'md-cloud-upload' }, { 'content': '模型训练', 'icon': 'antd-clock-circle' }, { 'content': '模型持久化', 'icon': 'fc-accept-database' }], pending='模型发布中', style={'marginLeft': '20px'}), fac.AntdDivider('添加末端进行中节点', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([ fac.AntdText(' 当设置了'), fac.AntdText('pending', code=True), fac.AntdText('时,时间轴的末尾会添加由虚线连接的表示进行中状态的节点') ]), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdTimeline( items=[ { 'content': '训练数据导入', 'icon': 'md-cloud-upload' },
def input_nSubmit_callback_demo(nSubmit, value): if nSubmit and value: return fac.AntdText(f'nSubmit: {nSubmit} value: {value}', italic=True)
def input_nClicksSearch_callback_demo(nClicksSearch, value): if nClicksSearch and value: return fac.AntdText(f'nClicksSearch: {nClicksSearch} value: {value}', italic=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.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(
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.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows',
'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' } ), fmc.FefferyMarkdown( markdownStr=open('documents/AntdFormItem.md', encoding='utf-8').read() ), html.Ul( [ html.Li( fac.AntdParagraph( [ fac.AntdText('有关'), fac.AntdText('AntdFormItem', strong=True), fac.AntdText('的使用示例请移步'), fac.AntdText('AntdForm', strong=True), fac.AntdText('对应的文档'), ], style={ 'paddingTop': '20px' } ), style={'listStyleType': 'circle'} ) ] ), html.Div(style={'height': '100px'})
def pagination_callback_demo(current, pageSize): return [ fac.AntdText(f'内容项{i}') for i in range((current - 1) * pageSize, current * pageSize) ]
def time_range_picker_demo_callback(value): return [ fac.AntdText('value: ', strong=True), fac.AntdText(f'{value[0]} ~ {value[1]}') ]
'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='''
'backgroundColor': '#f5f5f5', 'fontWeight': 'bold', 'fontSize': '1.2rem' } ), fmc.FefferyMarkdown( markdownStr=open('documents/AntdContent.md', encoding='utf-8').read() ), html.Ul( [ html.Li( fac.AntdParagraph( [ fac.AntdText('有关'), fac.AntdText('AntdContent', strong=True), fac.AntdText('的使用示例请移步'), fac.AntdText('AntdLayout', strong=True), fac.AntdText('对应的文档'), ], style={ 'paddingTop': '20px' } ), style={'listStyleType': 'circle'} ) ] ), html.Div(style={'height': '100px'})
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.AntdDivider( '基础使用', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([ fac.AntdText(' AntdPopover', strong=True),
}, id='回调示例', className='div-highlight'), html.Div( [ fac.AntdInput(id='input-md5-demo', mode='password', passwordUseMd5=True, maxLength=100, style={'width': '200px'}), html.Div(id='input-md5-demo-output'), fac.AntdDivider('password模式加密传输示例', lineColor='#f0f0f0', innerTextOrientation='left'), fac.AntdParagraph([ fac.AntdText(' 设置'), fac.AntdText('mode="password"', code=True), fac.AntdText('且'), fac.AntdText('passwordUseMd5=True', code=True), fac.AntdText('后,可在回调中利用md5加密后的输入值'), fac.AntdText('md5Value', strong=True), fac.AntdText('代替'), fac.AntdText('value', strong=True), fac.AntdText(',从而避免网络传输明文密码') ]), fac.AntdCollapse(fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString='''
], style={ # 使用css样式固定宽度 'width': '200px' } ), 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.AntdSelect( placeholder='请选择离散色彩:', colorsMode='diverging', colorsNameWidth=50, options=[
html.H2('AntdTabPane(children, id, className, style, *args, **kwargs)', style={ 'borderLeft': '4px solid grey', 'padding': '3px 0 3px 10px', 'backgroundColor': '#f5f5f5' }), 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/AntdTabPane.md', encoding='utf-8').read()), html.Ul([ html.Li(fac.AntdParagraph([ fac.AntdText('有关'), fac.AntdText('AntdTabPane', strong=True), fac.AntdText('的使用示例请移步'), fac.AntdText('AntdTabs', strong=True), fac.AntdText('对应的文档'), ], style={'paddingTop': '20px'}), style={'listStyleType': 'circle'}) ]), html.Div(style={'height': '100px'}) ])
], checkable=True, selectable=False, checkStrictly=True, defaultExpandAll=True ), fac.AntdDivider( '设置先辈节点与后代节点勾选行为彼此独立', lineColor='#f0f0f0', innerTextOrientation='left' ), fac.AntdParagraph( [ fac.AntdText(' 设置'), fac.AntdText('checkStrictly=True', code=True), fac.AntdText('时,可令先辈节点与后代节点之间的选择行为彼此独立') ] ), fac.AntdCollapse( fuc.FefferySyntaxHighlighter( showLineNumbers=True, showInlineLineNumbers=True, language='python', codeStyle='coy-without-shadows', codeString=''' fac.AntdTree( treeData=[ {
def input_value_callback_demo(value): return fac.AntdText(f'value: {value}', italic=True)