style={
'marginBottom': '10px'
}
),
html.Div(
[
fac.AntdCard(
fac.AntdParagraph(
""" 从来就没有什么救世主，
也不靠神仙皇帝。
要创造人类的幸福，
全靠我们自己。
我们要夺回劳动果实，
让思想冲破牢笼。
快把那炉火烧得通红，
趁热打铁才能成功！
这是最后的斗争，
团结起来，到明天，
英特纳雄耐尔就一定要实现。""",
italic=True
),
title='卡片示例',
style={
'width': '300px',
'marginBottom': '10px'
}
),
fac.AntdCard(
fac.AntdParagraph(
'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(
'回调示例', lineColor='#f0f0f0', innerTextOrientation='left'),
# 页面结构
fac.AntdRow(
[
fac.AntdCol(
html.Img(src=app.get_asset_url('imgs/fac-logo.svg'),
style={
'height': '50px',
'padding': '0 10px',
'marginTop': '7px'
}), ),
fac.AntdCol(
fac.AntdParagraph([
fac.AntdText('feffery-antd-components',
strong=True,
style={'fontSize': '35px'}),
fac.AntdText(f'v{fac.__version__}',
style={
'fontSize': '10px',
'paddingLeft': '2px'
})
])),
fac.AntdCol(fac.AntdParagraph([
fac.AntdText(
'Ctrl', keyboard=True, style={'color': '#8c8c8c'}),
fac.AntdText(
'K', keyboard=True, style={'color': '#8c8c8c'}),
fac.AntdText('唤出搜索面板', style={'color': '#8c8c8c'})
],
style={
'marginLeft': '50px',
'marginTop': '21px'
}),
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.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(
}
),
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'})
]
)
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'})
])
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.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdForm(
[
fac.AntdFormItem(
fac.AntdInput(),
label='用户名'
docs_content = html.Div([
html.Div([
html.H2('AntdText(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/AntdText.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.AntdParagraph([
fac.AntdText('code示例', code=True),
fac.AntdText('copyable示例', copyable=True),
fac.AntdText('strikethrough示例', strikethrough=True),
fac.AntdText('disabled示例', disabled=True),
fac.AntdText('mark示例', mark=True),
fac.AntdText('strong示例', strong=True),
fac.AntdText('underline示例', underline=True),
fac.AntdText('keyboard示例', keyboard=True),
fac.AntdText('secondary示例', type='secondary'),
fac.AntdText('success示例', type='success'),
fac.AntdText('warning示例', type='warning'),
fac.AntdText('danger示例', type='danger'),
]),
fac.AntdDivider('不同的渲染模式',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdParagraph(
[
fac.AntdText('code示例', code=True),
fac.AntdText('copyable示例', copyable=True),
fac.AntdText('strikethrough示例', strikethrough=True),
fac.AntdText('disabled示例', disabled=True),
fac.AntdText('mark示例', mark=True),
fac.AntdText('strong示例', strong=True),
fac.AntdText('underline示例', underline=True),
fac.AntdText('keyboard示例', keyboard=True),
fac.AntdText('secondary示例', type='secondary'),
fac.AntdText('success示例', type='success'),
fac.AntdText('warning示例', type='warning'),
fac.AntdText('danger示例', type='danger'),
]
)'''),
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'
})
],
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),
)
],
direction='vertical'
),
fac.AntdDivider(
'基础使用',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdParagraph(
[
fac.AntdText(' AntdSpace', strong=True),
fac.AntdText('可以视作页面元素排列的快捷方式，可以解决简单的多个组件水平方向或竖直方向上单一的等间距排列需求'
'更复杂的网格排列需求请移步'),
fac.AntdText('AntdRow/AntdCol', strong=True),
fac.AntdText('进行进一步学习')
]
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdDivider('默认水平方向', innerTextOrientation='left'),
fac.AntdSpace(
style={
'width': '100%'
}
),
fac.AntdDivider(
'回调示例',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdParagraph(
[
fac.AntdText(' 在这个例子中，充分展示了'),
fac.AntdText('AntdComment', strong=True),
fac.AntdText('配合'),
fac.AntdText('Dash', strong=True),
fac.AntdText('中的模式匹配回调，所实现的高度自由的评论功能')
]
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdComment(
id='comment-demo',
authorName='费弗里',
],
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.AntdAccordion(
[
fac.AntdAccordionItem(
f'手风琴项{i}测试',
title=f'手风琴项{i}',
key=str(i)
)
for i in range(5)
],
id='accordion-demo',
defaultActiveKey='3'
),
fac.AntdParagraph(
[
fac.AntdText('activeKey：'),
fac.AntdText(id='accordion-demo-output')
]
),
fac.AntdDivider(
'回调示例',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
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={'backgroundColor': 'rgb(240, 242, 245)'})
],
style={'height': '600px'})
],
style={
'height': '600px',
'border': '1px solid rgb(241, 241, 241)'
}),
fac.AntdDivider('不同的侧边栏位置',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdParagraph([
fac.AntdText(' 若需要侧边栏位于右侧，只需要将'),
fac.AntdText('AntdSider', strong=True),
fac.AntdText('在'),
fac.AntdText('AntdLayout', strong=True),
fac.AntdText('中的位置从列表第一调整至列表最后即可'),
]),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
html.Div(
[
fac.AntdLayout(
[
fac.AntdContent(
html.Div(
}
),
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'})
]
)
'fontSize': '1.2rem'
}),
style={'marginBottom': '10px'}),
html.Div(
[
fac.AntdDivider('type="line"（默认）',
innerTextOrientation='left'),
fac.AntdProgress(percent=80, style={'width': '200px'}),
fac.AntdDivider('type="circle"', innerTextOrientation='left'),
fac.AntdProgress(percent=80, type='circle'),
fac.AntdDivider('type="dashboard"',
innerTextOrientation='left'),
fac.AntdProgress(percent=80, type='dashboard'),
fac.AntdDivider(
'基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdParagraph([fac.AntdText(' 基础的3种进度条类型')]),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdDivider('type="line"（默认）', innerTextOrientation='left'),
fac.AntdProgress(percent=80, style={'width': '200px'}),
fac.AntdDivider('type="circle"', innerTextOrientation='left'),
fac.AntdProgress(percent=80, type='circle'),
fac.AntdDivider('type="dashboard"', innerTextOrientation='left'),
fac.AntdProgress(percent=80, type='dashboard')
'''),
title='点击查看代码',
is_open=False,
[
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='''
fac.AntdInput(
id='input-md5-demo',
mode='password',
passwordUseMd5=True,
'AntdDescriptionItem(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/AntdDescriptionItem.md',
encoding='utf-8').read()),
html.Ul([
html.Li(fac.AntdParagraph([
fac.AntdText('有关'),
fac.AntdText('AntdDescriptionItem', strong=True),
fac.AntdText('的使用示例请移步'),
fac.AntdText('AntdDescriptions', strong=True),
fac.AntdText('对应的文档'),
],
style={'paddingTop': '20px'}),
style={'listStyleType': 'circle'})
]),
html.Div(style={'height': '100px'})
])
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',
codeString='''
fac.AntdDraggerUpload(
id='dragger-upload-demo',
apiUrl='/upload/',
html.Div(html.Span('使用示例',
id='使用示例',
style={
'borderLeft': '4px solid grey',
'padding': '3px 0 3px 10px',
'backgroundColor': '#f5f5f5',
'fontWeight': 'bold',
'fontSize': '1.2rem'
}),
style={'marginBottom': '10px'}),
html.Div(
[
fac.AntdPageHeader(title='页头标题示例', subTitle='页头副标题示例'),
fac.AntdDivider(
'基础使用', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdParagraph(
[fac.AntdText(' 最基础的页头包含了自带浏览器后退功能的返回按钮、主标题及副标题信息')]),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdPageHeader(
title='页头标题示例',
subTitle='页头副标题示例'
)
'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
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={
'height': '500px',
'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'
},
{
'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),
fac.AntdText('中可通过'),
fac.AntdText('content', strong=True),
fac.AntdText('参数传入列表格式的'),
fac.AntdText('其他组件元素，作为气泡卡片中内容区元素进行渲染')
'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': '费弗里',
'value': '费弗里'
},
],
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=[
'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,
defaultValue=7.5,
allowHalf=True,
disabled=True
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=[
{
'title': '重庆市',
],
style={
'width': '300px'
}
),
fac.AntdDivider(
'基础使用',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdParagraph(
[
fac.AntdText(' 默认参数下，'),
fac.AntdText('AntdCascader', strong=True),
fac.AntdText('以单选的模式，供用户进行末端叶节点的选择')
]
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdCascader(
options=[
{
'value': '节点1',
