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)))
])
]
def table_callback_demo(currentData, recentlyChangedRow, sorter, filter,
pagination):
ctx = dash.callback_context
return [
fac.AntdTitle('本次回调由{}所触发'.format(
ctx.triggered[0]['prop_id'].split('.')[-1]),
level=3),
fac.AntdDivider(),
fac.AntdTitle('currentData：', level=5),
html.Pre(str(currentData)),
fac.AntdTitle('recentlyChangedRow：', level=5),
html.Pre(str(recentlyChangedRow)),
fac.AntdTitle('sorter：', level=5),
html.Pre(str(sorter)),
fac.AntdTitle('filter：', level=5),
html.Pre(str(filter)),
fac.AntdTitle('pagination：', level=5),
html.Pre(str(pagination))
]
),
style={
'marginBottom': '10px'
}
),
html.Div(
[
fac.AntdStatistic(
title='统计数值示例',
value=1332971
),
fac.AntdDivider(
'基础使用',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdStatistic(
title='统计数值示例',
value=1332971
)
'''
fmc.FefferyMarkdown(markdownStr=open('documents/AntdResult.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.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={
style={
'marginBottom': '10px'
}
),
html.Div(
[
html.Div(
[
fac.AntdAlert(message='这是一条alert测试')
]
),
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='这是一段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),
fac.AntdText('中可通过'),
fac.AntdText('content', strong=True),
fac.AntdText('参数传入列表格式的'),
fac.AntdText('其他组件元素，作为气泡卡片中内容区元素进行渲染')
]),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdPopover(
fac.AntdButton(
'padding': '3px 0 3px 10px',
'backgroundColor': '#f5f5f5',
'fontWeight': 'bold',
'fontSize': '1.2rem'
}),
style={'marginBottom': '10px'}),
html.Div(
[
fac.AntdSpin([
fac.AntdButton('触发通知提示框',
id='notification-trigger-button-demo1',
type='primary'),
html.Div(id='notification-container-demo1')
],
text='回调中'),
fac.AntdDivider(
'基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdParagraph([
fac.AntdText(' AntdNotification', strong=True),
fac.AntdText('的使用方式较为特殊，它属于'),
fac.AntdText('昙花一现', strong=True),
fac.AntdText('式的组件，不需要事先在'),
fac.AntdText('app.layout', strong=True),
fac.AntdText('中进行定义，推荐的使用方式是预先定义容纳它的容器，'
'后续回调中直接将'),
fac.AntdText('fac.AntdNotification(...)', italic=True),
fac.AntdText('对象作为回调输出返回对应容器即可，譬如本例中由按钮触发通知提示框的弹出显示')
]),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
fmc.FefferyMarkdown(markdownStr=open(
'documents/AntdTimeRangePicker.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.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={
'backgroundColor': 'rgba(241, 241, 241, 0.4)',
'height': '200px',
'display': 'flex',
'justifyContent': 'center',
'alignItems': 'center'
}
),
tab='标签页3',
key='标签页3'
)
]
),
fac.AntdDivider(
'基础使用',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdTabs(
[
fac.AntdTabPane(
html.Div(
'标签页1测试',
}),
style={'marginBottom': '10px'}),
html.Div(
[
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=[
style={
'marginBottom': '10px'
}
),
html.Div(
[
fac.AntdPictureUpload(
apiUrl='/upload/',
fileMaxSize=1,
buttonContent='点击上传图片'
),
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
)'''
),
'backgroundColor': '#f5f5f5',
'fontWeight': 'bold',
'fontSize': '1.2rem'
}),
style={'marginBottom': '10px'}),
html.Div(
[
html.Div([
fac.AntdButton('default'),
fac.AntdButton('primary', type='primary'),
fac.AntdButton('dashed', type='dashed'),
fac.AntdButton('link', type='link'),
fac.AntdButton('text', type='text')
]),
fac.AntdDivider('不同type对应按钮样式风格',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
html.Div(
[
fac.AntdButton('default'),
fac.AntdButton('primary', type='primary'),
fac.AntdButton('dashed', type='dashed'),
fac.AntdButton('link', type='link'),
fac.AntdButton('text', type='text')
]
'fontWeight': 'bold',
'fontSize': '1.2rem'
}),
style={'marginBottom': '10px'}),
html.Div(
[
fac.AntdTimeline(items=[{
'content': '训练数据导入'
}, {
'content': '模型训练'
}, {
'content': '模型持久化'
}, {
'content': '模型发布'
}]),
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': '模型训练'
},
{
fmc.FefferyMarkdown(markdownStr=open('documents/AntdPageHeader.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.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,
'documents/AntdDateRangePicker.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.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='使用示例',
style={
'borderLeft': '4px solid grey',
'padding': '3px 0 3px 10px',
'backgroundColor': '#f5f5f5',
'fontWeight': 'bold',
'fontSize': '1.2rem'
}),
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={
'borderLeft': '4px solid grey',
'padding': '3px 0 3px 10px',
'backgroundColor': '#f5f5f5',
'fontWeight': 'bold',
'fontSize': '1.2rem'
}),
style={'marginBottom': '10px'}),
html.Div(
[
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,
[
html.Div(
[
html.H2(
'AntdDivider(children, id, className, *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/AntdDivider.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.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.AntdDivider('AntdDivider'),
# 左对齐
fac.AntdDivider('AntdDivider',
innerTextOrientation='left'),
# 右对齐且设置内嵌文字样式
fac.AntdDivider('AntdDivider',
innerTextOrientation='right',
fontStyle='oblique'),
fac.AntdDivider('内嵌文字及文字位置设置',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
# 默认居中
fac.AntdDivider('AntdDivider'),
# 左对齐
fac.AntdDivider('AntdDivider', innerTextOrientation='left'),
# 右对齐且设置内嵌文字样式
fac.AntdDivider('AntdDivider', innerTextOrientation='right', fontStyle='oblique')'''
),
title='点击查看代码',
is_open=False,
ghost=True)
],
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='内嵌文字及文字位置设置',
className='div-highlight'),
html.Div(
[
html.Div([
'项目1',
fac.AntdDivider(direction='vertical',
lineColor='black'), '项目2',
fac.AntdDivider(direction='vertical',
lineColor='red'), '项目3'
]),
fac.AntdDivider('竖直分割线',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
html.Div(
[
'项目1',
fac.AntdDivider(direction='vertical', lineColor='black'),
'项目2',
fac.AntdDivider(direction='vertical', lineColor='red'),
'项目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': '#竖直分割线'
},
]
},
],
offsetTop=0),
style={
'flex': 'none',
'margin': '20px'
})
],
docs_content = html.Div([
html.Div([
html.H2('AntdDescriptions(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/AntdDescriptions.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.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'}),
fac.AntdDivider(
'基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
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)
],
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='基础使用',
className='div-highlight'),
html.Div(
[
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,
layout='vertical',
labelStyle={'fontWeight': 'bold'}),
fac.AntdDivider('垂直布局方式',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
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,
layout='vertical',
labelStyle={
'fontWeight': 'bold'
}
)
'''),
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('column=2', 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,
column=2,
labelStyle={'fontWeight': 'bold'}),
fac.AntdDivider('column=4', 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,
column=4,
labelStyle={'fontWeight': 'bold'}),
fac.AntdDivider('自定义每行标准子项数量',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdDivider('column=2', 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,
column=2,
labelStyle={
'fontWeight': 'bold'
}
),
fac.AntdDivider('column=4', 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,
column=4,
labelStyle={
'fontWeight': 'bold'
}
)
'''),
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.AntdDescriptions([
fac.AntdDescriptionItem('费弗里', label='姓名', span=2),
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'}),
fac.AntdDivider('令部分子项占据多个标准宽度',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdDescriptions(
[
fac.AntdDescriptionItem(
'费弗里',
label='姓名',
span=2
),
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)
],
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='令部分子项占据多个标准宽度',
className='div-highlight'),
html.Div(style={'height': '100px'})
],
style={'flex': 'auto'}),
html.Div(fac.AntdAnchor(linkDict=[
{
'title': '主要参数说明',
'href': '#主要参数说明'
},
{
'title':
'使用示例',
'href':
'#使用示例',
'children': [
{
'title': '基础使用',
'href': '#基础使用'
},
{
'title': '垂直布局方式',
'href': '#垂直布局方式'
},
{
'title': '自定义每行标准子项数量',
'href': '#自定义每行标准子项数量'
},
{
'title': '令部分子项占据多个标准宽度',
'href': '#令部分子项占据多个标准宽度'
},
]
},
],
offsetTop=0),
style={
'flex': 'none',
'margin': '20px'
})
],
fmc.FefferyMarkdown(markdownStr=open('documents/AntdSwitch.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.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'
},
'marginBottom': '10px'
}
),
html.Div(
[
fac.AntdButton('触发2秒加载动画', id='spin-basic-demo-input', type='primary'),
fac.AntdSpin(
fac.AntdText('nClicks: 0', id='spin-basic-demo-output', strong=True),
text='回调中'
),
fac.AntdDivider(
'基础使用',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdParagraph(
[
fac.AntdText(' 默认模式下，被'),
fac.AntdText('AntdSpin', strong=True),
fac.AntdText('作为children参数传入的所有后代组件，在作为回调过程的'),
fac.AntdText('Output', strong=True),
fac.AntdText('处于回调中状态时，都会触发加载动画过程'),
]
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
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.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)
html.Div(
[
fac.AntdSegmented(
options=[
{
'label': f'选项{i}',
'value': f'选项{i}'
}
for i in range(5)
],
defaultValue='选项1'
),
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}'
docs_content = html.Div([
html.Div([
html.H2('AntdCalendar(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/AntdCalendar.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.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'),
html.Div(
[
html.Div(fac.AntdCalendar(), style={'width': '300px'}),
html.Div(fac.AntdCalendar(), style={'width': '500px'}),
fac.AntdDivider('默认尺寸下日历宽度自适应容器大小',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
html.Div(
fac.AntdCalendar(),
style={
'width': '300px'
}
),
html.Div(
fac.AntdCalendar(),
style={
'width': '500px'
}
)
'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='默认尺寸下日历宽度自适应容器大小',
className='div-highlight'),
html.Div(
[
html.Div(fac.AntdCalendar(id='calendar-demo',
defaultValue='2022-01-01'),
style={'width': '300px'}),
html.Div(id='calendar-demo-output'),
fac.AntdDivider(
'回调示例', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
html.Div(
fac.AntdCalendar(
id='calendar-demo',
defaultValue='2022-01-01'
),
style={
'width': '300px'
}
),
html.Div(
id='calendar-demo-output'
)
...
@app.callback(
Output('calendar-demo-output', 'children'),
Input('calendar-demo', 'value')
)
def calendar_demo_callback(value):
return [
fac.AntdText('value: ', strong=True),
fac.AntdText(value)
]
'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='回调示例',
className='div-highlight'),
html.Div(style={'height': '100px'})
],
style={'flex': 'auto'}),
html.Div(fac.AntdAnchor(linkDict=[
{
'title': '主要参数说明',
'href': '#主要参数说明'
},
{
'title':
'使用示例',
'href':
'#使用示例',
'children': [
{
'title': '基础使用',
'href': '#基础使用'
},
{
'title': '默认尺寸下日历宽度自适应容器大小',
'href': '#默认尺寸下日历宽度自适应容器大小'
},
{
'title': '回调示例',
'href': '#回调示例'
},
]
},
],
offsetTop=0),
style={
'flex': 'none',
'margin': '20px'
})
],
style={
'borderLeft': '4px solid grey',
'padding': '3px 0 3px 10px',
'backgroundColor': '#f5f5f5',
'fontWeight': 'bold',
'fontSize': '1.2rem'
}),
style={'marginBottom': '10px'}),
html.Div(
[
fac.AntdCheckCardGroup([
fac.AntdCheckCard(fac.AntdStatistic(title='统计数值示例',
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}'
)
style={
'borderLeft': '4px solid grey',
'padding': '3px 0 3px 10px',
'backgroundColor': '#f5f5f5',
'fontWeight': 'bold',
'fontSize': '1.2rem'
}),
style={'marginBottom': '10px'}),
html.Div(
[
html.Div(fac.AntdAffix(fac.AntdButton('向下滑动页面体验固钉效果',
type='primary'),
offsetTop=100),
style={'marginBottom': '1000px'}),
fac.AntdDivider('下滑固钉示例',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
html.Div(
fac.AntdAffix(
fac.AntdButton(
'向下滑动页面体验固钉效果',
type='primary'
),
offsetTop=100
),
options=[
{'label': '中国', 'value': '中国'},
{'label': '美国', 'value': '美国'},
{'label': '俄罗斯', 'value': '俄罗斯'},
{'label': '德国', 'value': '德国', 'disabled': True},
{'label': '加拿大', 'value': '加拿大'}
],
style={
# 使用css样式固定宽度
'width': '200px'
}
),
fac.AntdDivider(
'基础的下拉选择',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSelect(
placeholder='请选择国家：',
options=[
{'label': '中国', 'value': '中国'},
{'label': '美国', 'value': '美国'},
html.Br(),
fac.AntdInput(size='middle',
placeholder='基础的输入框',
style={
'width': '200px',
'marginBottom': '5px'
}),
html.Br(),
fac.AntdInput(size='large',
placeholder='基础的输入框',
style={
'width': '200px',
'marginBottom': '5px'
}),
fac.AntdDivider('基础的输入框',
lineColor='#f0f0f0',
innerTextOrientation='left'),
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'
}
),
'key': '成都市',
'children': [
{
'title': '天府新区',
'key': '天府新区'
}
]
}
]
}
]
),
fac.AntdDivider(
'基础的树形控件',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdTree(
treeData=[
{
'title': '重庆市',
'key': '重庆市',
fmc.FefferyMarkdown(
markdownStr=open('documents/AntdTag.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.AntdTag(content='标签测试'),
fac.AntdDivider(
'基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdTag(
content='标签测试'
)'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
style={
'marginBottom': '40px',
