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)
