docs_content = html.Div([
html.Div([
html.H2('AntdRibbon(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/AntdRibbon.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.AntdSpace([
fac.AntdRibbon(html.Div(
style={
'height': '200px',
'width': '300px',
'borderRadius': '16px',
'boxShadow':
'rgb(102 124 145 / 9%) 0px 2px 6px 0px'
}),
text='缎带示例'),
fac.AntdRibbon(html.Div(
style={
'height': '200px',
'width': '300px',
'borderRadius': '16px',
'boxShadow':
'rgb(102 124 145 / 9%) 0px 2px 6px 0px'
}),
text='缎带示例',
placement='start',
color='#ff4d4f')
],
direction='vertical'),
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'
}
),
text='缎带示例'
),
fac.AntdRibbon(
html.Div(
style={
'height': '200px',
'width': '300px',
'borderRadius': '16px',
'boxShadow': 'rgb(102 124 145 / 9%) 0px 2px 6px 0px'
}
),
text='缎带示例',
placement='start',
color='#ff4d4f'
)
],
direction='vertical'
)
'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
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': '#基础使用'
},
]
},
],
offsetTop=0),
style={
'flex': 'none',
'margin': '20px'
})
],
[
fac.AntdSpace([
fac.AntdButton([
fac.AntdIcon(icon='md-power-settings-new'),
'md-power-settings-new'
]),
fac.AntdButton(
[fac.AntdIcon(icon='md-layers'), 'md-layers'],
type='primary'),
fac.AntdButton(
[fac.AntdIcon(icon='fc-repair'), 'fc-repair'],
type='dashed')
]),
fac.AntdDivider('配合AntdIcon添加图标',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpace(
[
fac.AntdButton(
[
fac.AntdIcon(
icon='md-power-settings-new'
),
'md-power-settings-new'
]
),
fac.AntdButton(
[
fac.AntdIcon(
icon='md-layers'
),
'md-layers'
],
type='primary'
),
fac.AntdButton(
[
fac.AntdIcon(
icon='fc-repair'
),
'fc-repair'
],
type='dashed'
)
]
)'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
'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([
fac.AntdText(' 本回调示例出于对服务器网络安全的考虑使用了'),
fac.AntdText('浏览器端回调', strong=True)
]),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
[
fac.AntdSpace([
fac.AntdPopover(fac.AntdButton('hover事件', type='primary'),
title='这是一段AntdTooltip提示示例'),
fac.AntdPopover(fac.AntdButton('click事件', type='primary'),
title='这是一段AntdTooltip提示示例',
trigger='click'),
fac.AntdPopover(fac.AntdInput(placeholder='focus事件',
style={'width': '150px'}),
title='这是一段AntdTooltip提示示例',
trigger='focus')
],
direction='vertical'),
fac.AntdDivider('不同的触发行为',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpace(
[
fac.AntdPopover(
fac.AntdButton(
'hover事件',
type='primary'
),
title='这是一段AntdTooltip提示示例'
),
fac.AntdPopover(
fac.AntdButton(
'click事件',
type='primary'
),
title='这是一段AntdTooltip提示示例',
trigger='click'
),
fac.AntdPopover(
fac.AntdInput(
placeholder='focus事件',
style={
'width': '150px'
}
),
title='这是一段AntdTooltip提示示例',
trigger='focus'
)
],
direction='vertical'
)'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
simple=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.AntdSpin(fac.AntdSpace(id='pagination-demo-output',
direction='vertical'),
text='回调中'),
fac.AntdPagination(id='pagination-demo',
defaultPageSize=10,
total=100,
pageSizeOptions=[5, 10, 20]),
fac.AntdDivider(
'回调示例', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpin(
fac.AntdSpace(
[
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
)
],
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',
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='''
'border': '1px solid #f0f0f0'
},
id='基础使用',
className='div-highlight'),
html.Div(
[
fac.AntdPopconfirm(fac.AntdButton('点击触发', type='primary'),
id='popconfirm-demo',
title='气泡确认测试'),
html.Br(),
fac.AntdSpace([
html.Div([
fac.AntdText('confirmCounts：', strong=True),
fac.AntdText(id='popconfirm-demo-output-1')
]),
html.Div([
fac.AntdText('cancelCounts：', strong=True),
fac.AntdText(id='popconfirm-demo-output-2')
])
],
direction='vertical'),
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(
[
fac.AntdSpace(
[
fac.AntdCascader(
placeholder='placement="bottomRight"',
options=[
{
'value': '节点1',
'label': '节点1',
'children': [
{
'value': '节点1-1',
'label': '节点1-1'
},
{
'value': '节点1-2',
'label': '节点1-2',
'children': [
{
'value': '节点1-2-1',
'label': '节点1-2-1'
},
{
'value': '节点1-2-2',
'label': '节点1-2-2'
}
]
}
]
}
],
placement='bottomRight',
style={
'width': '300px'
}
),
fac.AntdCascader(
placeholder='placement="topLeft"',
options=[
{
'value': '节点1',
'label': '节点1',
'children': [
{
'value': '节点1-1',
'label': '节点1-1'
},
{
'value': '节点1-2',
'label': '节点1-2',
'children': [
{
'value': '节点1-2-1',
'label': '节点1-2-1'
},
{
'value': '节点1-2-2',
'label': '节点1-2-2'
}
]
}
]
}
],
placement='topLeft',
style={
'width': '300px'
}
),
fac.AntdCascader(
placeholder='placement="topRight"',
options=[
{
'value': '节点1',
'label': '节点1',
'children': [
{
'value': '节点1-1',
'label': '节点1-1'
},
{
'value': '节点1-2',
'label': '节点1-2',
'children': [
{
'value': '节点1-2-1',
'label': '节点1-2-1'
},
{
'value': '节点1-2-2',
'label': '节点1-2-2'
}
]
}
]
}
],
placement='topRight',
style={
'width': '300px'
}
)
]
),
fac.AntdDivider(
'不同的悬浮层展开方位',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpace(
[
fac.AntdCascader(
placeholder='placement="bottomRight"',
options=[
{
'value': '节点1',
'label': '节点1',
'children': [
{
'value': '节点1-1',
'label': '节点1-1'
},
{
'value': '节点1-2',
'label': '节点1-2',
'children': [
{
'value': '节点1-2-1',
'label': '节点1-2-1'
},
{
'value': '节点1-2-2',
'label': '节点1-2-2'
}
]
}
]
}
],
placement='bottomRight',
style={
'width': '300px'
}
),
fac.AntdCascader(
placeholder='placement="topLeft"',
options=[
{
'value': '节点1',
'label': '节点1',
'children': [
{
'value': '节点1-1',
'label': '节点1-1'
},
{
'value': '节点1-2',
'label': '节点1-2',
'children': [
{
'value': '节点1-2-1',
'label': '节点1-2-1'
},
{
'value': '节点1-2-2',
'label': '节点1-2-2'
}
]
}
]
}
],
placement='topLeft',
style={
'width': '300px'
}
),
fac.AntdCascader(
placeholder='placement="topRight"',
options=[
{
'value': '节点1',
'label': '节点1',
'children': [
{
'value': '节点1-1',
'label': '节点1-1'
},
{
'value': '节点1-2',
'label': '节点1-2',
'children': [
{
'value': '节点1-2-1',
'label': '节点1-2-1'
},
{
'value': '节点1-2-2',
'label': '节点1-2-2'
}
]
}
]
}
],
placement='topRight',
style={
'width': '300px'
}
)
]
)'''
),
title='点击查看代码',
is_open=False,
ghost=True
)
],
[
html.Div(
[
html.H2(
'AntdBadge(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/AntdBadge.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.AntdSpace(
[
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=6
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=56,
overflowCount=50
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
shape='square',
src='/assets/imgs/avatar-demo.jpg'
),
dot=True
),
fac.AntdBadge(
fac.AntdIcon(
icon='fc-advertising',
style={
'fontSize': '40px'
}
),
count=6
),
fac.AntdBadge(
fac.AntdIcon(
icon='fc-advertising',
style={
'fontSize': '40px'
}
),
count=56,
overflowCount=50
),
fac.AntdBadge(
fac.AntdIcon(
icon='fc-advertising',
style={
'fontSize': '40px'
}
),
dot=True
),
fac.AntdBadge(
fac.AntdIcon(
icon='fc-advertising',
style={
'fontSize': '40px'
}
),
dot=True,
offset=[-8, 6]
)
],
size=20
),
fac.AntdDivider(
'常规的角标式徽标',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdParagraph(
[
fac.AntdText(' 徽标最常规的用法是给其'),
fac.AntdText('children', code=True),
fac.AntdText('参数所传入的元素添加角标形式的徽标数，主要用于'),
fac.AntdText('AntdIcon', code=True),
fac.AntdText('、'),
fac.AntdText('AntdAvatar', code=True),
fac.AntdText('等组件')
]
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpace(
[
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=6
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=56,
overflowCount=50
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
shape='square',
src='/assets/imgs/avatar-demo.jpg'
),
dot=True
),
fac.AntdBadge(
fac.AntdIcon(
icon='fc-advertising',
style={
'fontSize': '40px'
}
),
count=6
),
fac.AntdBadge(
fac.AntdIcon(
icon='fc-advertising',
style={
'fontSize': '40px'
}
),
count=56,
overflowCount=50
),
fac.AntdBadge(
fac.AntdIcon(
icon='fc-advertising',
style={
'fontSize': '40px'
}
),
dot=True
),
fac.AntdBadge(
fac.AntdIcon(
icon='fc-advertising',
style={
'fontSize': '40px'
}
),
dot=True,
offset=[-8, 6]
)
],
size=20
)
'''
),
title='点击查看代码',
is_open=False,
ghost=True
)
],
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='常规的角标式徽标',
className='div-highlight'
),
html.Div(
[
fac.AntdDivider('size="default"（默认）', innerTextOrientation='left'),
fac.AntdSpace(
[
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=6,
color='yellow'
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=56,
overflowCount=50,
color='orange'
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
shape='square',
src='/assets/imgs/avatar-demo.jpg'
),
dot=True,
color='cyan'
)
],
size=20
),
fac.AntdDivider('size="small"', innerTextOrientation='left'),
fac.AntdSpace(
[
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=6,
color='yellow',
size='small'
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=56,
overflowCount=50,
color='orange',
size='small'
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
shape='square',
src='/assets/imgs/avatar-demo.jpg'
),
dot=True,
color='cyan',
size='small'
)
],
size=20
),
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.AntdSpace(
[
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=6,
color='yellow'
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=56,
overflowCount=50,
color='orange'
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
shape='square',
src='/assets/imgs/avatar-demo.jpg'
),
dot=True,
color='cyan'
)
],
size=20
),
fac.AntdDivider('size="small"', innerTextOrientation='left'),
fac.AntdSpace(
[
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=6,
color='yellow',
size='small'
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=56,
overflowCount=50,
color='orange',
size='small'
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
shape='square',
src='/assets/imgs/avatar-demo.jpg'
),
dot=True,
color='cyan',
size='small'
)
],
size=20
)
'''
),
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.AntdBadge(count=8),
fac.AntdBadge(count=101),
fac.AntdBadge(count=101, size='small'),
fac.AntdBadge(dot=True, status='success'),
fac.AntdBadge(dot=True, status='error'),
fac.AntdBadge(dot=True, status='default'),
fac.AntdBadge(dot=True, status='processing'),
fac.AntdBadge(dot=True, status='warning'),
],
size=20
),
fac.AntdDivider(
'独立使用的徽标',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdParagraph(
[
fac.AntdText(' 当'),
fac.AntdText('AntdBadge', strong=True),
fac.AntdText('不传入'),
fac.AntdText('children', code=True),
fac.AntdText('参数时，可独立使用，'),
fac.AntdText('注意！', strong=True),
fac.AntdText('status="processing"', code=True),
fac.AntdText('仅徽标独立使用时可用，否则会出现显示异常')
]
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpace(
[
fac.AntdBadge(count=8),
fac.AntdBadge(count=101),
fac.AntdBadge(count=101, size='small'),
fac.AntdBadge(dot=True, status='success'),
fac.AntdBadge(dot=True, status='error'),
fac.AntdBadge(dot=True, status='default'),
fac.AntdBadge(dot=True, status='processing'),
fac.AntdBadge(dot=True, status='warning'),
],
size=20
)
'''
),
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(
'计数随机递增',
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'
),
id='badge-demo-2',
count=0,
dot=True
)
],
size=20
),
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(
'计数随机递增',
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'
),
id='badge-demo-2',
count=0,
dot=True
)
],
size=20
)
...
import random
@app.callback(
[Output('badge-demo-1', 'count'),
Output('badge-demo-2', 'count')],
Input('badge-demo-generate', 'nClicks'),
[State('badge-demo-1', 'count'),
State('badge-demo-2', 'count')],
prevent_initial_call=True
)
def badge_callback_demo(nClicks, count1, count2):
return count1 + random.randint(1, 10), count2 + random.randint(1, 10)
'''
),
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.AntdAlert(
type='info',
showIcon=True,
message='请你在点击【创建新一局游戏】后，以最快的速度对下方具有红点徽标的3个头像进行点击，全部耗时（单位：秒）即为你的成绩！',
messageRenderMode='marquee',
style={
'marginBottom': '5px'
}
),
fac.AntdButton(
'创建新一局游戏',
id='badge-click-demo-reset',
type='primary'
),
fac.AntdDivider(),
dcc.Store(id='badge-click-demo-start-time'),
html.Div(
id='badges-area',
style={
'display': 'flex',
'justifyContent': 'center'
}
),
html.Div(
id='badge-click-demo-score',
style={
'display': 'flex',
'justifyContent': 'center'
}
),
fac.AntdDivider(
'利用点击事件实现更多交互',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdParagraph(
[
fac.AntdText(' 当徽标或其包裹的子元素被点击时，都会触发更新'),
fac.AntdText('nClicks', code=True),
fac.AntdText('参数，从而帮助你实现更多回调交互效果')
]
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdAlert(
type='info',
showIcon=True,
message='请你在点击【创建新一局游戏】后，以最快的速度对下方具有红点徽标的3个头像进行点击，全部耗时（单位：秒）即为你的成绩！',
messageRenderMode='marquee',
style={
'marginBottom': '5px'
}
),
fac.AntdButton(
'创建新一局游戏',
id='badge-click-demo-reset',
type='primary'
),
fac.AntdDivider(),
dcc.Store(id='badge-click-demo-start-time'),
html.Div(
id='badges-area',
style={
'display': 'flex',
'justifyContent': 'center'
}
),
html.Div(
id='badge-click-demo-score',
style={
'display': 'flex',
'justifyContent': 'center'
}
)
...
@app.callback(
[Output('badges-area', 'children'),
Output('badge-click-demo-start-time', 'data')],
Input('badge-click-demo-reset', 'nClicks'),
prevent_initial_call=True
)
def badge_click_demo_callback1(nClicks):
badges_count = [1] * 3 + [0] * 7
random.shuffle(badges_count)
return [
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg',
style={
'cursor': 'pointer'
}
),
id={
'type': 'badge-click-demo',
'index': idx
},
count=c,
dot=True,
style={
'cursor': 'pointer'
}
)
for idx, c in enumerate(badges_count)
], {
'start-time': time.time()
}
@app.callback(
Output({'type': 'badge-click-demo', 'index': MATCH}, 'count'),
Input({'type': 'badge-click-demo', 'index': MATCH}, 'nClicks'),
State({'type': 'badge-click-demo', 'index': MATCH}, 'count'),
prevent_initial_call=True
)
def badge_click_demo_callback2(nClicks, count_):
return 0 if count_ != 0 else dash.no_update
@app.callback(
Output('badge-click-demo-score', 'children'),
Input({'type': 'badge-click-demo', 'index': ALL}, 'count'),
State('badge-click-demo-start-time', 'data'),
prevent_initial_call=True
)
def badge_click_demo_callback3(counts, start_time):
if sum(counts) == 0:
return fac.AntdParagraph(
[
fac.AntdText('你的得分：', strong=True),
fac.AntdText('%s秒' % round(time.time() - start_time['start-time'], 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': '#独立使用的徽标'},
{'title': '动态计数效果', 'href': '#动态计数效果'},
{'title': '利用点击事件实现更多交互', 'href': '#利用点击事件实现更多交互'},
]
},
],
offsetTop=0
),
style={
'flex': 'none',
'margin': '20px'
}
)
],
[
fac.AntdSpace(
[
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=6
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
shape='square',
src='/assets/imgs/avatar-demo.jpg'
),
dot=True
)
],
size=20
),
fac.AntdDivider(
'添加徽标',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpace(
[
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
src='/assets/imgs/avatar-demo.jpg'
),
count=6
),
fac.AntdBadge(
fac.AntdAvatar(
mode='image',
shape='square',
src='/assets/imgs/avatar-demo.jpg'
),
dot=True
)
],
size=20
)
'''
),
title='点击查看代码',
is_open=False,
ghost=True
)
],
[
fac.AntdSpace([
fac.AntdDropdown(title=placement,
arrow=True,
placement=placement,
menuItems=[{
'title': '子页面1'
}, {
'title': '子页面2'
}, {
'isDivider': True
}, {
'title': '子页面3-1'
}, {
'title': '子页面3-2'
}])
for placement in [
'bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft',
'topCenter', 'topRight'
]
],
size=20),
fac.AntdDivider('不同的弹出方位',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpace(
[
fac.AntdDropdown(
title=placement,
arrow=True,
placement=placement,
menuItems=[
{
'title': '子页面1'
},
{
'title': '子页面2'
},
{
'isDivider': True
},
{
'title': '子页面3-1'
},
{
'title': '子页面3-2'
}
]
)
for placement in [
'bottomLeft', 'bottomCenter', 'bottomRight',
'topLeft', 'topCenter', 'topRight']
],
size=20
)
'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
[
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)
],
[
fac.AntdSpin([
fac.AntdSpace([
fac.AntdInput(id='input-value-demo',
placeholder='value直接作为Input',
maxLength=100,
style={
'width': '250px',
'marginBottom': '5px'
}),
html.Span(id='input-value-demo-output')
]),
html.Br(),
fac.AntdSpace([
fac.AntdInput(
id='input-nSubmit-demo',
placeholder='nSubmit作为Input，value作为State',
maxLength=100,
style={
'width': '250px',
'marginBottom': '5px'
}),
html.Span(id='input-nSubmit-demo-output')
]),
html.Br(),
fac.AntdSpace([
fac.AntdInput(
id='input-nClicksSearch-demo',
mode='search',
placeholder='nClicksSearch作为Input，value作为State',
maxLength=100,
style={
'width': '320px',
'marginBottom': '5px'
}),
html.Span(id='input-nClicksSearch-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.AntdSpace(
[
fac.AntdInput(
id='input-value-demo',
placeholder='value直接作为Input',
maxLength=100,
style={
'width': '250px',
'marginBottom': '5px'
}
),
html.Span(id='input-value-demo-output')
]
),
html.Br(),
fac.AntdSpace(
[
fac.AntdInput(
id='input-nSubmit-demo',
placeholder='nSubmit作为Input，value作为State',
maxLength=100,
style={
'width': '250px',
'marginBottom': '5px'
}
),
html.Span(id='input-nSubmit-demo-output')
]
),
html.Br(),
fac.AntdSpace(
[
fac.AntdInput(
id='input-nClicksSearch-demo',
mode='search',
placeholder='nClicksSearch作为Input，value作为State',
maxLength=100,
style={
'width': '320px',
'marginBottom': '5px'
}
),
html.Span(id='input-nClicksSearch-demo-output')
]
)
...
@app.callback(
Output('input-value-demo-output', 'children'),
Input('input-value-demo', 'value'),
prevent_initial_call=True
)
def input_value_callback_demo(value):
return fac.AntdText(f'value: {value}', italic=True)
@app.callback(
Output('input-nSubmit-demo-output', 'children'),
Input('input-nSubmit-demo', 'nSubmit'),
State('input-nSubmit-demo', 'value'),
prevent_initial_call=True
)
def input_nSubmit_callback_demo(nSubmit, value):
if nSubmit and value:
return fac.AntdText(f'nSubmit: {nSubmit} value: {value}', italic=True)
@app.callback(
Output('input-nClicksSearch-demo-output', 'children'),
Input('input-nClicksSearch-demo', 'nClicksSearch'),
State('input-nClicksSearch-demo', 'value'),
prevent_initial_call=True
)
def input_nClicksSearch_callback_demo(nClicksSearch, value):
if nClicksSearch and value:
return fac.AntdText(f'nClicksSearch: {nClicksSearch} value: {value}', italic=True)'''
),
title='点击查看代码',
is_open=False,
ghost=True)
],
likesCount=1
),
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(
'回调示例',
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([
'multiple:',
fac.AntdSwitch(id='dragger-upload-demo-is-multiple',
checked=False,
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.AntdDivider('默认水平方向', innerTextOrientation='left'),
fac.AntdSpace(
[
html.Div(
style={
'backgroundColor': 'rgba(64, 173, 255, 1)',
'height': '50px',
'width': '50px'
}
),
html.Div(
style={
'backgroundColor': 'rgba(0, 146, 255, 1)',
'height': '50px',
'width': '50px'
}
),
html.Div(
style={
'backgroundColor': 'rgba(64, 173, 255, 1)',
'height': '50px',
'width': '50px'
}
)
]
),
fac.AntdDivider('竖直方向', innerTextOrientation='left'),
[
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
)
],
ghost=True)
],
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='基础使用',
className='div-highlight'),
html.Div(
[
fac.AntdDivider('内置色彩风格', innerTextOrientation='left'),
fac.AntdSpace([
fac.AntdTag(content=color, color=color) for color in [
'magenta', 'red', 'volcano', 'orange', 'gold', 'lime',
'green', 'cyan', 'blue', 'geekblue', 'purple'
]
],
direction='vertical'),
fac.AntdDivider('自定义色彩风格', innerTextOrientation='left'),
fac.AntdSpace([
fac.AntdTag(content=color, color=color)
for color in ['#f50', '#2db7f5', '#87d068', '#108ee9']
],
direction='vertical'),
fac.AntdDivider('不同的色彩风格',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
[
fac.AntdSpace(
[
fac.AntdSegmented(
options=[
{
'label': f'选项{i}',
'value': f'选项{i}'
}
for i in range(5)
],
defaultValue='选项1',
size='small'
),
fac.AntdSegmented(
options=[
{
'label': f'选项{i}',
'value': f'选项{i}'
}
for i in range(5)
],
defaultValue='选项1'
),
fac.AntdSegmented(
options=[
{
'label': f'选项{i}',
'value': f'选项{i}'
}
for i in range(5)
],
defaultValue='选项1',
size='large'
)
],
direction='vertical'
),
fac.AntdDivider(
'不同的尺寸规格',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpace(
[
fac.AntdSegmented(
options=[
{
'label': f'选项{i}',
'value': f'选项{i}'
}
for i in range(5)
],
defaultValue='选项1',
size='small'
),
fac.AntdSegmented(
options=[
{
'label': f'选项{i}',
'value': f'选项{i}'
}
for i in range(5)
],
defaultValue='选项1'
),
fac.AntdSegmented(
options=[
{
'label': f'选项{i}',
'value': f'选项{i}'
}
for i in range(5)
],
defaultValue='选项1',
size='large'
)
],
direction='vertical'
)'''
),
title='点击查看代码',
is_open=False,
ghost=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.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',
codeString='''
fac.AntdPageHeader(
[
fac.AntdSpace([
fac.AntdResult(status=status, title=f'status="{status}"')
for status in [
'success', 'info', 'error', 'warning', '404', '403',
'500'
]
],
direction='vertical',
addSplitLine=True,
style={'width': '100%'}),
fac.AntdDivider('其他内置状态示例',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpace(
[
fac.AntdResult(
status=status,
title=f'status="{status}"'
)
for status in [
'success', 'info', 'error', 'warning', '404', '403', '500'
]
],
direction='vertical',
addSplitLine=True,
style={
'width': '100%'
}
)'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
docs_content = html.Div([
html.Div([
html.H2(
'AntdCheckCard(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/AntdCheckCard.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.AntdSpace([
fac.AntdCheckCard(fac.AntdText('选择卡片示例' * 10)),
fac.AntdCheckCard(
fac.AntdStatistic(title='统计数值示例', value=1332971)),
fac.AntdCheckCard(
html.Div([
html.Div(fac.AntdAvatar(
mode='image',
size=48,
src='/assets/imgs/avatar-demo.jpg'),
style={
'flex': 'none',
'marginRight': '10px'
}),
html.Div(fac.AntdText('选择卡片示例' * 10),
style={'flex': 'auto'})
],
style={'display': 'flex'}))
],
direction='vertical'),
fac.AntdDivider(
'基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdParagraph([
fac.AntdText(' '),
fac.AntdText('AntdCheckCard', code=True),
fac.AntdText('中可自由嵌套其它任意元素')
]),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpace(
[
fac.AntdCheckCard(
fac.AntdText(
'选择卡片示例' * 10
)
),
fac.AntdCheckCard(
fac.AntdStatistic(
title='统计数值示例',
value=1332971
)
),
fac.AntdCheckCard(
html.Div(
[
html.Div(
fac.AntdAvatar(
mode='image',
size=48,
src='/assets/imgs/avatar-demo.jpg'
),
style={
'flex': 'none',
'marginRight': '10px'
}
),
html.Div(
fac.AntdText(
'选择卡片示例' * 10
),
style={
'flex': 'auto'
}
)
],
style={
'display': 'flex'
}
)
)
],
direction='vertical'
)
'''),
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.AntdCheckCard(fac.AntdText('选择卡片示例' * 10),
id='check-card-demo'),
fac.AntdParagraph([
fac.AntdText('checked: '),
fac.AntdText(id='check-card-demo-output')
]),
fac.AntdDivider(
'回调示例', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdCheckCard(
fac.AntdText(
'选择卡片示例' * 10
),
id='check-card-demo'
),
fac.AntdParagraph(
[
fac.AntdText('checked: '),
fac.AntdText(id='check-card-demo-output')
]
)
...
@app.callback(
Output('check-card-demo-output', 'children'),
Input('check-card-demo', 'checked')
)
def check_card_demo_callback(checked):
return str(checked)
'''),
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'
})
],
