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'),
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'),
'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.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',
'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=[
{
id='其他时间粒度选择',
className='div-highlight'
),
html.Div(
[
fac.AntdDatePicker(
id='date-picker-demo',
picker='date',
placeholder='请选择日期+时间',
defaultPickerValue='2020/01/01',
showTime=True
),
html.Br(),
fac.AntdSpin(
html.Em(id='date-picker-demo-output'),
text='回调中'
),
fac.AntdDivider(
'回调示例',
lineColor='#f0f0f0',
innerTextOrientation='left'
),
fac.AntdCollapse(
fuc.FefferySyntaxHighlighter(
showLineNumbers=True,
showInlineLineNumbers=True,
language='python',
codeStyle='coy-without-shadows',