}),
fmc.FefferyMarkdown(markdownStr=open('documents/AntdAffix.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(
[
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(
'向下滑动页面体验固钉效果',
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={
fmc.FefferyMarkdown(markdownStr=open('documents/AntdButton.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(
[
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.AntdMentions(id='mentions-demo',
placement='top',
autoSize=True,
options=[{
'label': '费弗里',
'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([
}),
fmc.FefferyMarkdown(markdownStr=open('documents/AntdPopover.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.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.AntdSteps(
id='steps-demo',
steps=[
{
'title': f'步骤{i}'
}
for i in range(5)
],
direction='horizontal',
type='navigation'
),
fac.AntdDivider(),
fac.AntdButton(
'下一步',
id='steps-demo-go-next',
type='primary'
),
fac.AntdDivider(direction='vertical'),
fac.AntdButton(
'上一步',
id='steps-demo-go-last',
type='primary'
),
fac.AntdDivider(direction='vertical'),
fac.AntdButton(
'重置',
id='steps-demo-restart',
type='primary'
),
fac.AntdDivider(),
'borderLeft': '4px solid grey',
'padding': '3px 0 3px 10px',
'backgroundColor': '#f5f5f5',
'fontWeight': 'bold',
'fontSize': '1.2rem'
}),
style={'marginBottom': '10px'}),
html.Div(
[
fac.AntdForm([
fac.AntdFormItem(fac.AntdInput(), 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}),
fac.AntdDivider(
'基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdParagraph([
fac.AntdText(' 在默认的'),
fac.AntdText('layout="horizontal"', code=True),
fac.AntdText('布局模式下，我们可以通过妥善使用参数'),
fac.AntdText('labelCol', code=True),
fac.AntdText('与'),
fac.AntdText('wrapperCol', code=True),
fac.AntdText('来将若干个表单输入类组件组合为一张经典的表单')
]),
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%)',
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(
'回调示例',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
docs_content = html.Div([
html.Div([
html.H2(
'AntdSkeleton(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/AntdSkeleton.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.AntdButton('触发2秒骨骼屏动画',
id='skeleton-basic-demo-input',
type='primary'),
html.Br(),
fac.AntdSkeleton(fac.AntdText('nClicks: 0',
id='skeleton-basic-demo-output',
strong=True),
active=True),
fac.AntdDivider(
'基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdParagraph([
fac.AntdText(' 默认模式下，被'),
fac.AntdText('AntdSkeleton', strong=True),
fac.AntdText('作为children参数传入的所有后代组件，在作为回调过程的'),
fac.AntdText('Output', strong=True),
fac.AntdText('处于回调中状态时，都会触发骨骼屏动画过程'),
]),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdButton('触发2秒骨骼屏动画', id='skeleton-basic-demo-input', type='primary'),
html.Br(),
fac.AntdSkeleton(
fac.AntdText('nClicks: 0', id='skeleton-basic-demo-output', strong=True),
active=True
)
...
@app.callback(
Output('skeleton-basic-demo-output', 'children'),
Input('skeleton-basic-demo-input', 'nClicks'),
prevent_initial_call=True
)
def skeleton_basic_callback_demo(nClicks):
import time
time.sleep(2)
return f'nClicks: {nClicks}'
'''),
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.AntdButton('触发2秒骨骼屏动画',
id='skeleton-custom-demo-input',
type='primary'),
html.Br(),
fac.AntdSkeleton(fac.AntdText('nClicks: 0',
id='skeleton-custom-demo-output',
strong=True),
active=True,
avatar=True,
paragraph={
'rows': 3,
'width': '95%'
},
title={'width': '4rem'}),
fac.AntdDivider('自定义头像、段落及标题占位效果',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdButton('触发2秒骨骼屏动画', id='skeleton-custom-demo-input', type='primary'),
html.Br(),
fac.AntdSkeleton(
fac.AntdText('nClicks: 0', id='skeleton-custom-demo-output', strong=True),
active=True,
avatar=True,
paragraph={
'rows': 3,
'width': '95%'
},
title={
'width': '4rem'
}
)
...
@app.callback(
Output('skeleton-custom-demo-output', 'children'),
Input('skeleton-custom-demo-input', 'nClicks'),
prevent_initial_call=True
)
def skeleton_custom_callback_demo(nClicks):
import time
time.sleep(2)
return f'nClicks: {nClicks}'
'''),
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'
})
],
}),
fmc.FefferyMarkdown(markdownStr=open('documents/AntdPopconfirm.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.AntdPopconfirm(fac.AntdButton('点击触发', type='primary'),
title='气泡确认测试'),
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(
'点击触发',
type='primary'
),
title='气泡确认测试'
docs_content = html.Div([
html.Div([
html.H2('AntdModal(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/AntdModal.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.AntdButton(
'触发对话框', type='primary', id='modal-demo-trigger-1'),
fac.AntdModal(fac.AntdText('对话框内容测试'),
id='modal-demo-1',
visible=False,
title={
'content': '标题测试',
'prefixIcon': 'fc-search'
},
renderFooter=True),
fac.AntdDivider(
'基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdButton(
'触发对话框',
type='primary',
id='modal-demo-trigger-1'
),
fac.AntdModal(
fac.AntdText('对话框内容测试'),
id='modal-demo-1',
visible=False,
title={
'content': '标题测试',
'prefixIcon': 'fc-search'
},
renderFooter=True
)
...
@app.callback(
Output('modal-demo-1', 'visible'),
Input('modal-demo-trigger-1', 'nClicks'),
prevent_initial_call=True
)
def modal_demo_callback1(nClicks):
return 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.AntdButton(
'触发对话框', type='primary', id='modal-demo-trigger-2'),
fac.AntdModal(fac.AntdText('对话框内容测试'),
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='''
fac.AntdButton(
'触发对话框',
type='primary',
id='modal-demo-trigger-2'
),
fac.AntdModal(
fac.AntdText('对话框内容测试'),
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'
)
...
@app.callback(
Output('modal-demo-2', 'visible'),
Input('modal-demo-trigger-2', 'nClicks'),
prevent_initial_call=True
)
def modal_demo_callback2(nClicks):
return True
@app.callback(
[Output('modal-demo-2-output-1', 'children'),
Output('modal-demo-2-output-2', 'children'),
Output('modal-demo-2-output-3', 'children')],
[Input('modal-demo-2', 'okCounts'),
Input('modal-demo-2', 'cancelCounts'),
Input('modal-demo-2', 'closeCounts')],
prevent_initial_call=True
)
def modal_demo_callback3(okCounts, cancelCounts, closeCounts):
return [str(okCounts), str(cancelCounts), str(closeCounts)]
'''),
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'
})
],
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'
),
[
html.Div(
[
html.H2(
'AntdMessage(children, id, className, style, **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/AntdMessage.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.AntdSpin(
[
fac.AntdButton('触发全局提示框', id='message-trigger-button-demo1', type='primary'),
html.Div(id='message-container-demo1')
],
text='回调中'
),
fac.AntdDivider(
'基础使用',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdParagraph(
[
fac.AntdText(' AntdMessage', strong=True),
fac.AntdText('的使用方式较为特殊，它属于'),
fac.AntdText('昙花一现', strong=True),
fac.AntdText('式的组件，相当于简化版的'),
fac.AntdText('AntdNotification', strong=True),
fac.AntdText('，不需要事先在'),
fac.AntdText('app.layout', strong=True),
fac.AntdText('中进行定义，推荐的使用方式是预先定义容纳它的容器，'
'后续回调中直接将'),
fac.AntdText('fac.AntdMessage(...)', italic=True),
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',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='基础使用',
className='div-highlight'
),
html.Div(
[
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
)
],
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'
}
)
],
id='将其他组件整合入侧边栏',
className='div-highlight'),
html.Div(
[
fac.AntdSpin(html.Div(
[
fac.AntdLayout([
fac.AntdSider(id='sider-custom-trigger-demo',
collapsible=True,
trigger=None,
style={
'backgroundColor':
'rgb(240, 242, 245)'
}),
fac.AntdContent(fac.AntdButton(
'自定义折叠按钮',
id='sider-custom-trigger-button-demo',
type='primary'),
style={'backgroundColor': 'white'})
],
style={'height': '600px'})
],
style={
'height': '600px',
'border': '1px solid rgb(241, 241, 241)'
}),
text='回调中'),
fac.AntdDivider('自定义侧边栏折叠触发器',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
[
html.Div(
[
html.H2(
'AntdSpin(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/AntdSpin.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.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(
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
)
],
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='基础使用',
className='div-highlight'
),
html.Div(
[
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
)
],
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='延迟加载',
className='div-highlight'
),
html.Div(
[
fac.AntdSpace(
[
fac.AntdButton('未被includeProps指定', id='spin-include-demo-input1', type='primary'),
fac.AntdButton('被includeProps指定', id='spin-include-demo-input2', type='primary')
]
),
fac.AntdSpin(
fac.AntdSpace(
[
fac.AntdText('未被includeProps指定 nClicks: 0', id='spin-include-demo-output1',
strong=True),
fac.AntdText('被includeProps指定 nClicks: 0', id='spin-include-demo-output2',
strong=True)
],
direction='vertical'
),
listenPropsMode='include',
includeProps=['spin-include-demo-output2.children'],
text='回调中'
),
fac.AntdDivider(
'include模式',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdParagraph(
[
fac.AntdText(" listenPropsMode='include'", strong=True),
fac.AntdText("时，由"),
fac.AntdText('includeProps', strong=True),
fac.AntdText('指定的组件属性对应的'),
fac.AntdText('Output', strong=True),
fac.AntdText('回调过程才会触发加载动画'),
]
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpace(
[
fac.AntdButton('未被includeProps指定', id='spin-include-demo-input1', type='primary'),
fac.AntdButton('被includeProps指定', id='spin-include-demo-input2', type='primary')
]
),
fac.AntdSpin(
fac.AntdSpace(
[
fac.AntdText('未被includeProps指定 nClicks: 0', id='spin-include-demo-output1', strong=True),
fac.AntdText('被includeProps指定 nClicks: 0', id='spin-include-demo-output2', strong=True)
],
direction='vertical'
),
listenPropsMode='include',
includeProps=['spin-include-demo-output2.children'],
text='回调中'
)
...
@app.callback(
Output('spin-include-demo-output1', 'children'),
Input('spin-include-demo-input1', 'nClicks'),
prevent_initial_call=True
)
def spin_include_callback_demo1(nClicks):
import time
time.sleep(1)
return f'未被includeProps指定 nClicks: {nClicks}'
@app.callback(
Output('spin-include-demo-output2', 'children'),
Input('spin-include-demo-input2', 'nClicks'),
prevent_initial_call=True
)
def spin_include_callback_demo2(nClicks):
import time
time.sleep(1)
return f'被includeProps指定 nClicks: {nClicks}'
'''
),
title='点击查看代码',
is_open=False,
ghost=True
)
],
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='include模式',
className='div-highlight'
),
html.Div(
[
fac.AntdSpace(
[
fac.AntdButton('未被excludeProps指定', id='spin-exclude-demo-input1', type='primary'),
fac.AntdButton('被excludeProps指定', id='spin-exclude-demo-input2', type='primary')
]
),
fac.AntdSpin(
fac.AntdSpace(
[
fac.AntdText('未被excludeProps指定 nClicks: 0', id='spin-exclude-demo-output1',
strong=True),
fac.AntdText('被excludeProps指定 nClicks: 0', id='spin-exclude-demo-output2',
strong=True)
],
direction='vertical'
),
listenPropsMode='exclude',
excludeProps=['spin-exclude-demo-output2.children'],
text='回调中'
),
fac.AntdDivider(
'exclude模式',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdParagraph(
[
fac.AntdText(" listenPropsMode='exclude'", strong=True),
fac.AntdText("时，由"),
fac.AntdText('excludeProps', strong=True),
fac.AntdText('指定的组件属性对应的'),
fac.AntdText('Output', strong=True),
fac.AntdText('回调过程不会触发加载动画'),
]
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpace(
[
fac.AntdButton('未被excludeProps指定', id='spin-exclude-demo-input1', type='primary'),
fac.AntdButton('被excludeProps指定', id='spin-exclude-demo-input2', type='primary')
]
),
fac.AntdSpin(
fac.AntdSpace(
[
fac.AntdText('未被excludeProps指定 nClicks: 0', id='spin-exclude-demo-output1', strong=True),
fac.AntdText('被excludeProps指定 nClicks: 0', id='spin-exclude-demo-output2', strong=True)
],
direction='vertical'
),
listenPropsMode='exclude',
excludeProps=['spin-exclude-demo-output2.children'],
text='回调中'
)
...
@app.callback(
Output('spin-exclude-demo-output1', 'children'),
Input('spin-exclude-demo-input1', 'nClicks'),
prevent_initial_call=True
)
def spin_exclude_callback_demo1(nClicks):
import time
time.sleep(1)
return f'未被excludeProps指定 nClicks: {nClicks}'
@app.callback(
Output('spin-exclude-demo-output2', 'children'),
Input('spin-exclude-demo-input2', 'nClicks'),
prevent_initial_call=True
)
def spin_exclude_callback_demo2(nClicks):
import time
time.sleep(1)
return f'被excludeProps指定 nClicks: {nClicks}'
'''
),
title='点击查看代码',
is_open=False,
ghost=True
)
],
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='exclude模式',
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': 'include模式', 'href': '#include模式'},
{'title': 'exclude模式', 'href': '#exclude模式'},
]
},
],
offsetTop=0
),
style={
'flex': 'none',
'margin': '20px'
}
)
],
}),
fmc.FefferyMarkdown(markdownStr=open('documents/AntdTooltip.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.AntdTooltip(fac.AntdButton('请将鼠标悬浮于此', type='primary'),
title='这是一段AntdTooltip提示示例'),
fac.AntdDivider(
'基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdTooltip(
fac.AntdButton(
'请将鼠标悬浮于此',
type='primary'
),
title='这是一段AntdTooltip提示示例'
docs_content = html.Div([
html.Div([
html.H2('AntdNotification(children, id, className, style, **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/AntdNotification.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.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='''
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'
},
id='基础使用',
className='div-highlight'),
html.Div(
[
fac.AntdSpin([
fac.AntdSelect(placeholder='选择不同的状态',
options=[{
'label': 'default',
'value': 'default'
}, {
'label': 'success',
'value': 'success'
}, {
'label': 'error',
'value': 'error'
}, {
'label': 'info',
'value': 'info'
}, {
'label': 'warning',
'value': 'warning'
}],
id='notification-type-select-demo2',
style={'width': '200px'}),
fac.AntdButton('触发通知提示框',
id='notification-trigger-button-demo2',
type='primary'),
html.Div(id='notification-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.AntdSelect(
placeholder='选择不同的状态',
options=[
{
'label': 'default',
'value': 'default'
},
{
'label': 'success',
'value': 'success'
},
{
'label': 'error',
'value': 'error'
},
{
'label': 'info',
'value': 'info'
},
{
'label': 'warning',
'value': 'warning'
}
],
id='notification-type-select-demo2',
style={
'width': '200px'
}
),
fac.AntdButton('触发通知提示框', id='notification-trigger-button-demo2', type='primary'),
html.Div(id='notification-container-demo2')
...
@app.callback(
Output('notification-container-demo2', 'children'),
Input('notification-trigger-button-demo2', 'nClicks'),
State('notification-type-select-demo2', 'value'),
prevent_initial_call=True
)
def notification_demo2(nClicks, value):
if value:
return fac.AntdNotification(
message='通知提示框测试',
description='这是一段辅助说明文字内容',
type=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(
[
fac.AntdSpin([
fac.AntdSelect(placeholder='选择不同的弹出位置',
options=[{
'label': 'topLeft',
'value': 'topLeft'
}, {
'label': 'topRight',
'value': 'topRight'
}, {
'label': 'bottomLeft',
'value': 'bottomLeft'
}, {
'label': 'bottomRight',
'value': 'bottomRight'
}],
id='notification-placement-select-demo3',
style={'width': '200px'}),
fac.AntdButton('触发通知提示框',
id='notification-trigger-button-demo3',
type='primary'),
html.Div(id='notification-container-demo3')
],
text='回调中'),
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': 'topLeft',
'value': 'topLeft'
},
{
'label': 'topRight',
'value': 'topRight'
},
{
'label': 'bottomLeft',
'value': 'bottomLeft'
},
{
'label': 'bottomRight',
'value': 'bottomRight'
}
],
id='notification-placement-select-demo3',
style={
'width': '200px'
}
),
fac.AntdButton('触发通知提示框', id='notification-trigger-button-demo3', type='primary'),
html.Div(id='notification-container-demo3')
...
@app.callback(
Output('notification-container-demo3', 'children'),
Input('notification-trigger-button-demo3', 'nClicks'),
State('notification-placement-select-demo3', 'value'),
prevent_initial_call=True
)
def notification_demo3(nClicks, value):
if value:
return fac.AntdNotification(
message='通知提示框测试',
description='这是一段辅助说明文字内容',
placement=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(
[
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',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
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')
...
@app.callback(
Output('notification-container-demo4', 'children'),
Input('notification-trigger-button-demo4', 'nClicks'),
State('notification-slider-demo4', 'value'),
prevent_initial_call=True
)
def notification_demo4(nClicks, value):
if value:
return fac.AntdNotification(
message=f'持续时长{value}秒' if value != 10 else '持续时长∞秒',
description='这是一段辅助说明文字内容',
duration=value if value != 10 else None
)'''),
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'
})
],
'''),
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.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',
'title': sub_item['props']['title'],
'handler':
'() => window.open("%s")' % sub_item['props']['href'],
'section': group['props']['title']
} for group in Config.menuItems
for item in group['children'] if item['component'] == 'SubMenu'
for sub_item in item['children']]),
# 注入快捷添加好友悬浮卡片
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={
docs_content = html.Div([
html.Div([
html.H2('AntdDrawer(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/AntdDrawer.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.AntdButton(
'触发抽屉', type='primary', id='drawer-demo-trigger-1'),
fac.AntdDrawer(fac.AntdText('抽屉内容测试' * 200),
id='drawer-demo-1',
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.AntdButton(
'触发抽屉',
type='primary',
id='drawer-demo-trigger-1'
),
fac.AntdDrawer(
fac.AntdText('抽屉内容测试' * 200),
id='drawer-demo-1',
style={
'zIndex': 99999
}
)
...
@app.callback(
Output('drawer-demo-1', 'visible'),
Input('drawer-demo-trigger-1', 'nClicks'),
prevent_initial_call=True
)
def drawer_demo_callback1(nClicks):
return 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.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)
],
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'
})
],
