예제 #1
0
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '经典布局',
                 'href': '#经典布局'
             },
             {
                 'title': '不同的侧边栏位置',
                 'href': '#不同的侧边栏位置'
             },
             {
                 'title': '可折叠的侧边栏',
                 'href': '#可折叠的侧边栏'
             },
             {
                 'title': '响应式菜单栏折叠',
                 'href': '#响应式菜单栏折叠'
             },
             {
                 'title': '将其他组件整合入侧边栏',
                 'href': '#将其他组件整合入侧边栏'
             },
             {
                 'title': '自定义侧边栏折叠触发器',
                 'href': '#自定义侧边栏折叠触发器'
             },
         ]
     },
 ],
                         offsetTop=0),
예제 #2
0
            ],
            style={
                'flex': 'auto'
            }
        ),

        html.Div(
            fac.AntdAnchor(
                linkDict=[
                    {'title': '主要参数说明', 'href': '#主要参数说明'},
                    {
                        'title': '使用示例',
                        'href': '#使用示例',
                        'children': [
                            {'title': '基础使用', 'href': '#基础使用'},
                            {'title': '不同的状态类型', 'href': '#不同的状态类型'},
                            {'title': '添加状态图标', 'href': '#添加状态图标'},
                            {'title': '添加关闭按钮', 'href': '#添加关闭按钮'},
                            {'title': '轮播模式示例', 'href': '#轮播模式示例'},
                            {'title': '跑马灯模式示例', 'href': '#跑马灯模式示例'},
                        ]
                    },
                ],
                offsetTop=0
            ),
            style={
                'flex': 'none',
                'margin': '20px'
            }
        )
    ],
    style={
예제 #3
0
            },
            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={'display': '20px'})
예제 #4
0
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '基础使用',
                 'href': '#基础使用'
             },
             {
                 'title': '不同的状态',
                 'href': '#不同的状态'
             },
             {
                 'title': '不同的弹出位置',
                 'href': '#不同的弹出位置'
             },
             {
                 'title': '持续显示时长的设置',
                 'href': '#持续显示时长的设置'
             },
         ]
     },
 ],
                         offsetTop=0),
예제 #5
0
 ],
          style={'flex': 'auto'}),
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '基础使用',
                 'href': '#基础使用'
             },
             {
                 'title': '不同的触发行为',
                 'href': '#不同的触发行为'
             },
             {
                 'title': '为title自定义前缀图标',
                 'href': '#为title自定义前缀图标'
             },
         ]
     },
 ],
                         offsetTop=0),
          style={
              'flex': 'none',
예제 #6
0
                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={
        'display': 'flex'
    }
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '基础使用',
                 'href': '#基础使用'
             },
             {
                 'title': '调整时间粒度',
                 'href': '#调整时间粒度'
             },
             {
                 'title': '12小时制',
                 'href': '#12小时制'
             },
             {
                 'title': '自定义format',
                 'href': '#自定义format'
             },
             {
                 'title': '回调示例',
                 'href': '#回调示例'
             },
         ]
     },
 ],
                         offsetTop=0),
예제 #8
0
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '不同type对应按钮样式风格',
                 'href': '#不同type对应按钮样式风格'
             },
             {
                 'title': '充当跳转功能使用',
                 'href': '#充当跳转功能使用'
             },
             {
                 'title': '撑满父级元素宽度',
                 'href': '#撑满父级元素宽度'
             },
             {
                 'title': '显示为危险警告状态',
                 'href': '#显示为危险警告状态'
             },
             {
                 'title': '显示为不可点击状态',
                 'href': '#显示为不可点击状态'
             },
             {
                 'title': '修改按钮形状',
                 'href': '#修改按钮形状'
             },
             {
                 'title': '配合AntdIcon添加图标',
                 'href': '#配合AntdIcon添加图标'
             },
             {
                 'title': '回调示例',
                 'href': '#回调示例'
             },
         ]
     },
 ],
                         offsetTop=0),
예제 #9
0
                html.Div(style={'height': '100px'})
            ],
            style={
                'flex': 'auto'
            }
        ),
        html.Div(
            fac.AntdAnchor(
                linkDict=[
                    {'title': '主要参数说明', 'href': '#主要参数说明'},
                    {
                        'title': '使用示例',
                        'href': '#使用示例',
                        'children': [
                            {'title': '基础使用及单文件大小限制', 'href': '#基础使用及单文件大小限制'},
                            {'title': '图片编辑功能', 'href': '#图片编辑功能'},
                            {'title': '回调示例', 'href': '#回调示例'},
                        ]
                    }
                ],
                offsetTop=0
            ),
            style={
                'flex': 'none',
                'margin': '20px'
            }
        )
    ],
    style={
        'display': 'flex'
예제 #10
0
                fac.AntdBackTop(
                    containerId='docs-content',
                    duration=0.6
                ),

                html.Div(
                    [
                        html.Div(
                            [
                                fac.AntdAnchor(
                                    linkDict=[
                                        {'title': '示例2-1', 'href': '#示例2-1'},
                                        {'title': '示例2-1-1', 'href': '#示例2-1-1'},
                                        {'title': '示例2-1-2', 'href': '#示例2-1-2'},
                                        {'title': '示例2-2', 'href': '#示例2-2'},
                                    ],
                                    align='right',
                                    containerId='anchor-container-demo',
                                    targetOffset=100
                                ),
                                html.Div(
                                    [
                                        html.H5('示例2-1', id='示例2-1', style={'marginBottom': '800px'}),
                                        html.H5('示例2-1-1', id='示例2-1-1', style={'marginBottom': '800px'}),
                                        html.H5('示例2-1-2', id='示例2-1-2', style={'marginBottom': '800px'}),
                                        html.H5('示例2-2', id='示例2-2', style={'marginBottom': '800px'}),
                                    ]
                                )
                            ],
                            id='anchor-container-demo',
예제 #11
0
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '基础使用',
                 'href': '#基础使用'
             },
             {
                 'title': '不同的节点颜色状态',
                 'href': '#不同的节点颜色状态'
             },
             {
                 'title': '自定义节点图标及样式',
                 'href': '#自定义节点图标及样式'
             },
             {
                 'title': '添加末端进行中节点',
                 'href': '#添加末端进行中节点'
             },
             {
                 'title': '翻转坐标轴',
                 'href': '#翻转坐标轴'
             },
             {
                 'title': '添加节点标签',
                 'href': '#添加节点标签'
             },
         ]
     },
 ],
                         offsetTop=0),
예제 #12
0
             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',
             'padding': '20px'
         }
     )
 ],
 style={
예제 #13
0
 ],
          style={'flex': 'auto'}),
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '基础使用',
                 'href': '#基础使用'
             },
             {
                 'title': '不同的色彩风格',
                 'href': '#不同的色彩风格'
             },
             {
                 'title': '充当链接功能',
                 'href': '#充当链接功能'
             },
         ]
     },
 ],
                         offsetTop=0),
          style={
              'flex': 'none',
예제 #14
0
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '基础使用',
                 'href': '#基础使用'
             },
             {
                 'title': 'percent达到100时的状态',
                 'href': '#percent达到100时的状态'
             },
             {
                 'title': '自定义百分比数值内容',
                 'href': '#自定义百分比数值内容'
             },
             {
                 'title': '不同的自定义状态',
                 'href': '#不同的自定义状态'
             },
             {
                 'title': '关闭额外说明内容',
                 'href': '#关闭额外说明内容'
             },
             {
                 'title': '自定义进度条颜色',
                 'href': '#自定义进度条颜色'
             },
             {
                 'title': '分段线型进度条',
                 'href': '#分段线型进度条'
             },
         ]
     },
 ],
                         offsetTop=0),
예제 #15
0
 html.Div(fac.AntdAnchor(linkDict=[{
     'title': '主要参数说明',
     'href': '#主要参数说明'
 }, {
     'title':
     '使用示例',
     'href':
     '#使用示例',
     'children': [
         {
             'title': '基础使用及单文件大小限制',
             'href': '#基础使用及单文件大小限制'
         },
         {
             'title': '限制上传列表显示任务记录最大数量',
             'href': '#限制上传列表显示任务记录最大数量'
         },
         {
             'title': '限制上传文件的类型范围',
             'href': '#限制上传文件的类型范围'
         },
         {
             'title': '多文件上传模式',
             'href': '#多文件上传模式'
         },
         {
             'title': '文件夹上传模式',
             'href': '#文件夹上传模式'
         },
         {
             'title': '自定义失败任务记录悬浮提示信息',
             'href': '#自定义失败任务记录悬浮提示信息'
         },
         {
             'title': '回调示例',
             'href': '#回调示例'
         },
     ]
 }],
                         offsetTop=0),
예제 #16
0
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '基础使用',
                 'href': '#基础使用'
             },
             {
                 'title': '配置输入框自适应高度',
                 'href': '#配置输入框自适应高度'
             },
             {
                 'title': '不同的子项悬浮层弹出方位',
                 'href': '#不同的子项悬浮层弹出方位'
             },
             {
                 'title': '回调示例',
                 'href': '#回调示例'
             },
         ]
     },
 ],
                         offsetTop=0),
예제 #17
0
         style={
             'flex': 'auto',
             'width': 'calc(100vw - 625px)'
         }
     ),
     html.Div(
         fac.AntdAnchor(
             linkDict=[
                 {'title': '主要参数说明', 'href': '#主要参数说明'},
                 {
                     'title': '使用示例',
                     'href': '#使用示例',
                     'children': [
                         {'title': '基础使用', 'href': '#基础使用'},
                         {'title': '添加额外悬浮提示信息卡片', 'href': '#添加额外悬浮提示信息卡片'},
                         {'title': '手动设置默认激活的标签页', 'href': '#手动设置默认激活的标签页'},
                         {'title': '不同的标签页吸附位置', 'href': '#不同的标签页吸附位置'},
                         {'title': '不同的标签页渲染类型', 'href': '#不同的标签页渲染类型'},
                         {'title': '标签页面板众多时自动开启省略模式', 'href': '#标签页面板众多时自动开启省略模式'},
                         {'title': '回调示例', 'href': '#回调示例'},
                     ]
                 },
             ],
             offsetTop=0
         ),
         style={
             'flex': 'none',
             'margin': '20px'
         }
     )
 ],
예제 #18
0
     ],
     style={'flex': 'auto'}),
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '常规的实线与虚线分割线',
                 'href': '#常规的实线与虚线分割线'
             },
             {
                 'title': '内嵌文字及文字位置设置',
                 'href': '#内嵌文字及文字位置设置'
             },
             {
                 'title': '竖直分割线',
                 'href': '#竖直分割线'
             },
         ]
     },
 ],
                         offsetTop=0),
          style={
              'flex': 'none',
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '基础使用',
                 'href': '#基础使用'
             },
             {
                 'title': '垂直布局方式',
                 'href': '#垂直布局方式'
             },
             {
                 'title': '自定义每行标准子项数量',
                 'href': '#自定义每行标准子项数量'
             },
             {
                 'title': '令部分子项占据多个标准宽度',
                 'href': '#令部分子项占据多个标准宽度'
             },
         ]
     },
 ],
                         offsetTop=0),
예제 #20
0
                 style={
                     'display': 'flex',
                     'justifyContent': 'center'
                 })
    ],
             style={
                 'flex': 'auto',
                 'marginBottom': '200px'
             }),
    html.Div(fac.AntdAnchor(linkDict=[
        {
            'title': '1 Dash+fac开发环境的准备',
            'href': '#1 Dash+fac开发环境的准备'
        },
        {
            'title': '2 用Dash开发静态页面',
            'href': '#2 用Dash开发静态页面'
        },
        {
            'title': '3 用Dash开发交互应用',
            'href': '#3 用Dash开发交互应用'
        },
    ],
                            offsetTop=0),
             style={
                 'flex': 'none',
                 'margin': '20px'
             })
],
                        style={'display': 'flex'})
예제 #21
0
                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'
            }
        )
    ],
    style={
        'display': 'flex'
예제 #22
0
 ],
          style={'flex': 'auto'}),
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '基础使用',
                 'href': '#基础使用'
             },
             {
                 'title': '默认尺寸下日历宽度自适应容器大小',
                 'href': '#默认尺寸下日历宽度自适应容器大小'
             },
             {
                 'title': '回调示例',
                 'href': '#回调示例'
             },
         ]
     },
 ],
                         offsetTop=0),
          style={
              'flex': 'none',
예제 #23
0
             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'
         }
     )
 ],
 style={
예제 #24
0
         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',
              'padding': '20px'
          })
예제 #25
0
 ],
          style={'flex': 'auto'}),
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '基础使用',
                 'href': '#基础使用'
             },
             {
                 'title': '多选模式',
                 'href': '#多选模式'
             },
             {
                 'title': '回调示例',
                 'href': '#回调示例'
             },
         ]
     },
 ],
                         offsetTop=0),
          style={
              'flex': 'none',
예제 #26
0
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '基础的输入框',
                 'href': '#基础的输入框'
             },
             {
                 'title': 'default模式下设置前后缀内容',
                 'href': '#default模式下设置前后缀内容'
             },
             {
                 'title': '其他输入框模式',
                 'href': '#其他输入框模式'
             },
             {
                 'title': '设置初始状态填充值',
                 'href': '#设置初始状态填充值'
             },
             {
                 'title': '文本域模式下显示已输入内容字数',
                 'href': '#文本域模式下显示已输入内容字数'
             },
             {
                 'title': '回调示例',
                 'href': '#回调示例'
             },
             {
                 'title': 'password模式加密传输示例',
                 'href': '#password模式加密传输示例'
             },
         ]
     },
 ],
                         offsetTop=0),
예제 #27
0
     style={
         'flex': 'auto'
     }
 ),
 html.Div(
     fac.AntdAnchor(
         linkDict=[
             {'title': '主要参数说明', 'href': '#主要参数说明'},
             {
                 'title': '使用示例',
                 'href': '#使用示例',
                 'children': [
                     {'title': '基础的下拉选择', 'href': '#基础的下拉选择'},
                     {'title': '分组下拉选择', 'href': '#分组下拉选择'},
                     {'title': '色带渲染模式', 'href': '#色带渲染模式'},
                     {'title': '多选与自由新增模式', 'href': '#多选与自由新增模式'},
                     {'title': '设置默认选中值', 'href': '#设置默认选中值'},
                     {'title': '修改下拉选择最大高度', 'href': '#修改下拉选择最大高度'},
                     {'title': '设置输入框已选择选项最大显示数量', 'href': '#设置输入框已选择选项最大显示数量'},
                     {'title': '自主控制显示空状态示例', 'href': '#自主控制显示空状态示例'},
                     {'title': '回调示例', 'href': '#回调示例'}
                 ]
             },
         ],
         offsetTop=0
     ),
     style={
         'flex': 'none',
         'margin': '20px'
     }
 )
 html.Div(fac.AntdAnchor(linkDict=[
     {
         'title': '主要参数说明',
         'href': '#主要参数说明'
     },
     {
         'title':
         '使用示例',
         'href':
         '#使用示例',
         'children': [
             {
                 'title': '基础的日期范围选择控件',
                 'href': '#基础的日期范围选择控件'
             },
             {
                 'title': '添加时间选择',
                 'href': '#添加时间选择'
             },
             {
                 'title': '自定义空白填充文字',
                 'href': '#自定义空白填充文字'
             },
             {
                 'title': '修改时间粒度',
                 'href': '#修改时间粒度'
             },
             {
                 'title': '禁用开始或结束输入框',
                 'href': '#禁用开始或结束输入框'
             },
             {
                 'title': '回调示例',
                 'href': '#回调示例'
             },
         ]
     },
 ],
                         offsetTop=0),
예제 #29
0
         ],
         style={
             'flex': 'auto'
         }
     ),
     html.Div(
         fac.AntdAnchor(
             linkDict=[
                 {'title': '主要参数说明', 'href': '#主要参数说明'},
                 {
                     'title': '使用示例',
                     'href': '#使用示例',
                     'children': [
                         {'title': '基础的树形控件', 'href': '#基础的树形控件'},
                         {'title': '可勾选的树形控件', 'href': '#可勾选的树形控件'},
                         {'title': '可点击多选的树形控件', 'href': '#可点击多选的树形控件'},
                         {'title': '为节点自定义前缀图标', 'href': '#为节点自定义前缀图标'},
                         {'title': '关闭节点连接线', 'href': '#关闭节点连接线'},
                         {'title': '大数据量时限制最大显示高度提升性能', 'href': '#大数据量时限制最大显示高度提升性能'},
                         {'title': '设置先辈节点与后代节点勾选行为彼此独立', 'href': '#设置先辈节点与后代节点勾选行为彼此独立'},
                         {'title': '回调示例', 'href': '#回调示例'},
                     ]
                 },
             ],
             offsetTop=0
         ),
         style={
             'flex': 'none',
             'margin': '20px'
         }
     )
 ],
예제 #30
0
                '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'
             })
],
                        style={'display': 'flex'})