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.AntdSpin([
fac.AntdDropdown(id='dropdown-demo',
title='触发点',
arrow=True,
placement='topCenter',
menuItems=[{
'title': '子页面1',
'key': '子页面1',
}, {
'title': '子页面2',
'key': '子页面2',
}, {
'isDivider': True
}, {
'title': '子页面3-1',
'key': '子页面3-1'
}, {
'title': '子页面3-2',
'key': '子页面3-2'
}]),
html.Div(id='dropdown-demo-output')
],
text='回调中'),
fac.AntdDivider(
'回调示例', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdParagraph([
fac.AntdText(' 除了在构造选项时传入href等参数令选项充当链接跳转功能之外，'),
fac.AntdText('AntdDropdown', strong=True),
fac.AntdText('还可通过为选项设置key值，从而在回调中监听'),
fac.AntdText('clickedKey', strong=True),
fac.AntdText('随着选项点击事件的变化')
]),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpin(
[
fac.AntdDropdown(
id='dropdown-demo',
title='触发点',
arrow=True,
placement='topCenter',
menuItems=[
{
'title': '子页面1',
'key': '子页面1',
},
{
'title': '子页面2',
'key': '子页面2',
},
{
'isDivider': True
},
{
'title': '子页面3-1',
'key': '子页面3-1'
},
{
'title': '子页面3-2',
'key': '子页面3-2'
}
]
),
html.Div(
id='dropdown-demo-output'
)
],
text='回调中'
)
...
@app.callback(
Output('dropdown-demo-output', 'children'),
Input('dropdown-demo', 'clickedKey'),
prevent_initial_call=True
)
def dropdown_demo_callback(clickedKey):
return [
fac.AntdText('clickedKey: ', strong=True),
fac.AntdText(clickedKey)
]
'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
[
fac.AntdSpin(html.Div([
fac.AntdSwitch(id='switch-demo',
style={'marginRight': '10px'}),
fac.AntdText('checked：', strong=True),
fac.AntdText(id='switch-demo-output')
]),
text='回调中'),
fac.AntdDivider(
'回调示例', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpin(
html.Div(
[
fac.AntdSwitch(
id='switch-demo',
style={
'marginRight': '10px'
}
),
fac.AntdText('checked：', strong=True),
fac.AntdText(id='switch-demo-output')
]
),
text='回调中'
)
...
@app.callback(
Output('switch-demo-output', 'children'),
Input('switch-demo', 'checked')
)
def switch_demo_callback(checked):
return str(checked)'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
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('对象作为回调输出返回对应容器即可，譬如本例中由按钮触发通知提示框的弹出显示')
)
],
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='自主控制显示空状态示例',
className='div-highlight'
),
html.Div(
[
fac.AntdSpin(
html.Pre('[]', id='select-demo-output'),
text='回调中'
),
fac.AntdSelect(
id='select-demo',
placeholder='请选择国家：',
mode='multiple',
options=[
{'label': '中国', 'value': '中国'},
{'label': '美国', 'value': '美国'},
{'label': '俄罗斯', 'value': '俄罗斯'},
{'label': '德国', 'value': '德国', 'disabled': True},
{'label': '加拿大', 'value': '加拿大'}
],
style={
# 使用css样式固定宽度
'width': '200px'
fac.AntdSpin(
[
fac.AntdButton(
'新建标签页',
id='tabs-demo-add',
type='primary',
style={
'marginBottom': '5px'
}
),
fac.AntdTabs(
[
fac.AntdTabPane(
'基础标签页',
tab='基础标签页',
key='基础标签页',
closable=False
),
fac.AntdTabPane(
tab='禁用标签页',
key='禁用标签页',
disabled=True
)
] + [
fac.AntdTabPane(
'标签页1',
tab='标签页1',
key='标签页1'
)
],
id='tabs-demo',
type='editable-card'
)
],
text='回调中'
),
[
fac.AntdSpin([
html.Div(id='time-range-picker-demo-output'),
fac.AntdTimeRangePicker(id='time-range-picker-demo',
allowClear=True,
format='hh时mm分ss秒',
style={'width': '300px'})
],
text='回调中'),
fac.AntdDivider(
'回调示例', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpin(
[
html.Div(
id='time-range-picker-demo-output'
),
fac.AntdTimeRangePicker(
id='time-range-picker-demo',
allowClear=True,
format='hh时mm分ss秒',
style={
'width': '300px'
}
)
],
text='回调中'
)
...
@app.callback(
Output('time-range-picker-demo-output', 'children'),
Input('time-range-picker-demo', 'value'),
prevent_initial_call=True
)
def time_range_picker_demo_callback(value):
return [
fac.AntdText('value: ', strong=True),
fac.AntdText(f'{value[0]} ~ {value[1]}')
]
'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
[
fac.AntdSpin(
fac.AntdSpace(
[
html.Div(
[
fac.AntdText('单选value：', strong=True),
fac.AntdText(id='cascader-demo-output')
]
),
html.Div(
[
fac.AntdText('多选value：', strong=True),
fac.AntdText(id='cascader-multiple-demo-output')
]
),
fac.AntdCascader(
id='cascader-demo',
placeholder='单选回调示例：',
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'
}
]
}
]
},
{
'value': '节点2',
'label': '节点2',
'children': [
{
'value': '节点2-1',
'label': '节点2-1'
},
{
'value': '节点2-2',
'label': '节点2-2'
}
]
}
],
style={
'width': '300px'
}
),
fac.AntdCascader(
id='cascader-multiple-demo',
placeholder='多选回调示例：',
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'
}
]
}
]
},
{
'value': '节点2',
'label': '节点2',
'children': [
{
'value': '节点2-1',
'label': '节点2-1'
},
{
'value': '节点2-2',
'label': '节点2-2'
}
]
}
],
multiple=True,
style={
'width': '300px'
}
)
],
direction='vertical'
),
text='回调中'
),
fac.AntdDivider(
'回调示例',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdParagraph(
[
fac.AntdText(' AntdCascader', strong=True),
fac.AntdText('已选择的值会在value中以层级选择路径对应值列表的形式进行记录，当满足后代节点被全选时则会仅记录对应的祖先节点值')
]
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpin(
fac.AntdSpace(
[
html.Div(
[
fac.AntdText('单选value：', strong=True),
fac.AntdText(id='cascader-demo-output')
]
),
html.Div(
[
fac.AntdText('多选value：', strong=True),
fac.AntdText(id='cascader-multiple-demo-output')
]
),
fac.AntdCascader(
id='cascader-demo',
placeholder='单选回调示例：',
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'
}
]
}
]
},
{
'value': '节点2',
'label': '节点2',
'children': [
{
'value': '节点2-1',
'label': '节点2-1'
},
{
'value': '节点2-2',
'label': '节点2-2'
}
]
}
],
style={
'width': '300px'
}
),
fac.AntdCascader(
id='cascader-multiple-demo',
placeholder='多选回调示例：',
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'
}
]
}
]
},
{
'value': '节点2',
'label': '节点2',
'children': [
{
'value': '节点2-1',
'label': '节点2-1'
},
{
'value': '节点2-2',
'label': '节点2-2'
}
]
}
],
multiple=True,
style={
'width': '300px'
}
)
],
direction='vertical'
),
text='回调中'
)
...
@app.callback(
Output('cascader-demo-output', 'children'),
Input('cascader-demo', 'value')
)
def cascader_demo_callback(value):
return str(value)
@app.callback(
Output('cascader-multiple-demo-output', 'children'),
Input('cascader-multiple-demo', 'value')
)
def cascader_multiple_demo_callback(value):
return str(value)'''
),
title='点击查看代码',
is_open=False,
ghost=True
)
],
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='设置数值提示框前后缀文字',
className='div-highlight'),
html.Div(
[
html.Div([
fac.AntdSlider(id='slider-demo-1', min=-100, max=100),
fac.AntdSlider(
id='slider-demo-2', range=True, min=-100, max=100)
],
style={'width': '400px'}),
html.Br(),
fac.AntdSpin(html.Em(id='slider-demo-output'), text='回调中'),
fac.AntdDivider(
'回调示例', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
html.Div(
[
fac.AntdSlider(id='slider-demo-1', min=-100, max=100),
fac.AntdSlider(id='slider-demo-2', range=True, min=-100, max=100)
],
style={
'width': '400px'
[
fac.AntdSpin([
html.Div([
fac.AntdText('value：', strong=True),
fac.AntdText(id='tree-select-demo-output')
]),
fac.AntdTreeSelect(id='tree-select-demo',
treeData=[{
"title":
"Node1",
"value":
"0-0",
"key":
"0-0",
"children": [{
"title": "Child Node1",
"value": "0-0-0",
"key": "0-0-0"
}]
}, {
"title":
"Node2",
"value":
"0-1",
"key":
"0-1",
"children": [{
"title": "Child Node3",
"value": "0-1-0",
"key": "0-1-0"
}, {
"title": "Child Node4",
"value": "0-1-1",
"key": "0-1-1"
}, {
"title": "Child Node5",
"value": "0-1-2",
"key": "0-1-2"
}]
}],
style={'width': '250px'})
],
text='回调中'),
fac.AntdDivider(
'回调示例', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpin(
[
html.Div(
[
fac.AntdText('value：', strong=True),
fac.AntdText(id='tree-select-demo-output')
]
),
fac.AntdTreeSelect(
id='tree-select-demo',
treeData=[
{
"title": "Node1",
"value": "0-0",
"key": "0-0",
"children": [
{
"title": "Child Node1",
"value": "0-0-0",
"key": "0-0-0"
}
]
},
{
"title": "Node2",
"value": "0-1",
"key": "0-1",
"children": [
{
"title": "Child Node3",
"value": "0-1-0",
"key": "0-1-0"
},
{
"title": "Child Node4",
"value": "0-1-1",
"key": "0-1-1"
},
{
"title": "Child Node5",
"value": "0-1-2",
"key": "0-1-2"
}
]
}
],
style={
'width': '250px'
}
)
],
text='回调中'
)
...
@app.callback(
Output('tree-select-demo-output', 'children'),
Input('tree-select-demo', 'value')
)
def tree_select_demo_callback(value):
return str(value)
'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
),
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(),
fac.AntdSpin(
html.Em(id='steps-demo-current'),
text='回调中'
),
fac.AntdDivider(
'回调示例',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
[
fac.AntdSpin(
[
fac.AntdRadioGroup(
id='radio-group-demo',
options=[
{
'label': f'选项{i}',
'value': f'选项{i}'
}
for i in range(5)
],
defaultValue='选项1'
),
html.Div(
[
fac.AntdText('value：', strong=True),
fac.AntdText(id='radio-group-demo-output')
]
)
],
text='回调中'
),
fac.AntdDivider(
'回调示例',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpin(
[
fac.AntdRadioGroup(
id='radio-group-demo',
options=[
{
'label': f'选项{i}',
'value': f'选项{i}'
}
for i in range(5)
],
defaultValue='选项1'
),
html.Div(
[
fac.AntdText('value：', strong=True),
fac.AntdText(id='radio-group-demo-output')
]
)
],
text='回调中'
)
...
@app.callback(
Output('radio-group-demo-output', 'children'),
Input('radio-group-demo', 'value')
)
def radio_group_demo_callback(value):
return str(value)
'''
),
title='点击查看代码',
is_open=False,
ghost=True
)
],
'label': 'Game Icons精选',
'value': 'gi'
},
{
'label': 'IcoMoon Free精选',
'value': 'im'
}
],
optionType='button',
defaultValue='antd'
),
fac.AntdSpin(
fac.AntdRow(
id='icon-demo',
style={
'minHeight': '50px'
}
)
),
fac.AntdDivider(
'基础使用',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdParagraph(
[
fac.AntdText(' AntdIcon', strong=True),
fac.AntdText('可配合'),
fac.AntdText('AntdButton', strong=True),
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
id='修改左右区域标题及双向按钮文字',
className='div-highlight'),
html.Div(
[
html.Div(
fac.AntdTransfer(id='transfer-demo',
dataSource=[{
'key': str(i),
'title': f'选项{i}'
} for i in range(20)])),
html.Br(),
fac.AntdSpin(html.Em(id='transfer-demo-output'),
text='回调中'),
fac.AntdDivider('回调示例',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
html.Div(
fac.AntdTransfer(
id='transfer-demo',
dataSource=[
{
'key': str(i),
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.AntdDateRangePicker(id='date-range-picker-demo'),
html.Br(),
fac.AntdSpin(html.Em(id='date-range-picker-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.AntdDateRangePicker(id='date-range-picker-demo'),
html.Br(),
html.Em(id='date-range-picker-demo-output')
...
@app.callback(
Output('date-range-picker-demo-output', 'children'),
Input('date-range-picker-demo', 'value'),
[
fac.AntdSpin(fac.AntdForm([
fac.AntdFormItem(fac.AntdRadioGroup(
id='form-demo-1-status',
options=[{
'label': 'None',
'value': 'None'
}, {
'label': 'success',
'value': 'success',
}, {
'label': 'warning',
'value': 'warning',
}, {
'label': 'error',
'value': 'error',
}, {
'label': 'validating',
'value': 'validating',
}],
optionType='button',
defaultValue='None'),
label='切换状态'),
fac.AntdFormItem(
fac.AntdInput(), id='form-demo-1', label='用户名')
],
labelCol={'span': 4},
wrapperCol={'span': 8}),
text='回调中',
delay=300),
fac.AntdDivider('不同的校验状态',
lineColor='#f0f0f0',
innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpin(
fac.AntdForm(
[
fac.AntdFormItem(
fac.AntdRadioGroup(
id='form-demo-1-status',
options=[
{
'label': 'None',
'value': 'None'
},
{
'label': 'success',
'value': 'success',
},
{
'label': 'warning',
'value': 'warning',
},
{
'label': 'error',
'value': 'error',
},
{
'label': 'validating',
'value': 'validating',
}
],
optionType='button',
defaultValue='None'
),
label='切换状态'
),
fac.AntdFormItem(
fac.AntdInput(),
id='form-demo-1',
label='用户名'
)
],
labelCol={
'span': 4
},
wrapperCol={
'span': 8
}
),
text='回调中',
delay=300
)
...
@app.callback(
[Output('form-demo-1', 'validateStatus'),
Output('form-demo-1', 'help')],
Input('form-demo-1-status', 'value')
)
def form_demo_1_callback(value):
if not value or value == 'None':
return None, None
return value, f'validateStatus="{value}"'
'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
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.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.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,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
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='回调中'
)
...
@app.callback(
Output('sider-custom-trigger-demo', 'collapsed'),
Input('sider-custom-trigger-button-demo', 'nClicks'),
State('sider-custom-trigger-demo', 'collapsed'),
prevent_initial_call=True
)
def sider_custom_trigger_demo(nClicks, collapsed):
if nClicks:
return not collapsed
return dash.no_update'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
'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),
title='点击查看代码',
is_open=False,
ghost=True)
],
id='配合AntdIcon添加图标',
style={
'marginBottom': '40px',
'padding': '10px 10px 20px 10px',
'border': '1px solid #f0f0f0'
},
className='div-highlight'),
html.Div(
[
fac.AntdButton('点我点我', type='primary', id='button-demo'),
html.Br(),
fac.AntdSpin(html.Em(id='button-demo-output'), text='回调中'),
fac.AntdDivider(
'回调示例', innerTextOrientation='left', lineColor='#f0f0f0'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdButton('点我点我', type='primary', id='button-demo'),
html.Br(),
html.Em(id='button-demo-output')
...
@app.callback(
Output('button-demo-output', 'children'),
Input('button-demo', 'nClicks'),
'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('处于回调中状态时，都会触发加载动画过程'),
},
id='图片编辑功能',
className='div-highlight'
),
html.Div(
[
fac.AntdPictureUpload(
id='picture-upload-demo',
apiUrl='/upload/',
fileMaxSize=1,
buttonContent='点击上传图片'
),
fac.AntdSpin(
html.Pre(id='picture-upload-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.AntdSegmented(
options=[
{
'label': f'选项{i}',
'value': f'选项{i}'
}
for i in range(5)
],
id='segmented-demo',
defaultValue='选项1'
),
fac.AntdSpin(
fac.AntdText(
id='segmented-demo-output'
),
text='回调中'
),
fac.AntdDivider(
'回调示例',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
[
fac.AntdSpin([
fac.AntdRate(id='rate-demo', count=10, allowHalf=True),
html.Br(),
fac.AntdText('value: ', strong=True),
fac.AntdText(id='rate-demo-output')
],
text='回调中'),
fac.AntdDivider(
'回调示例', lineColor='#f0f0f0', innerTextOrientation='left'),
fac.AntdCollapse(fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
fac.AntdSpin(
[
fac.AntdRate(id='rate-demo', count=10, allowHalf=True),
html.Br(),
fac.AntdText('value: ', strong=True),
fac.AntdText(id='rate-demo-output')
],
text='回调中'
)
...
@app.callback(
Output('rate-demo-output', 'children'),
Input('rate-demo', 'value'),
prevent_initial_call=True
)
def rate_demo_callback(value):
return value
'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
'children': [
{
'title': '天府新区',
'key': '天府新区'
}
]
}
]
}
],
multiple=True,
checkable=True
),
fac.AntdSpin(
html.Div(id='tree-demo-output'),
text='回调中'
),
fac.AntdDivider(
'回调示例',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',
codeString='''
[
fac.AntdSpin(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(
id='pagination-demo-output',
direction='vertical'
),
text='回调中'
),
fac.AntdPagination(
id='pagination-demo',
defaultPageSize=10,
total=100,
pageSizeOptions=[5, 10, 20]
)
...
@app.callback(
Output('pagination-demo-output', 'children'),
[Input('pagination-demo', 'current'),
Input('pagination-demo', 'pageSize')]
)
def pagination_callback_demo(current, pageSize):
return [
fac.AntdText(f'内容项{i}')
for i in range((current - 1) * pageSize, current * pageSize)
]
'''),
title='点击查看代码',
is_open=False,
ghost=True)
],
