（数据科学学习手札110）Python+Dash快速web应用开发——静态部件篇（下） (2)

　　而Spinner()中虽然只提供了上述两种样式的加载动画，但其实提供了fullscreen_style与spinner_style参数来供用户自定义css来实现更多样的加载动画效果，关于这部分内容我们将在之后单独写一期教程，到时还会与Dash自带的Loading()部件进行比较。

2.3 Tabs()+Tab()创建多选项卡

　　在Dash中我们可以使用dash-bootstrap-components中的Tabs()来组织Tab()子元素，这时每个Tab()之下的子元素就可以视为单独的页面，从而通过点击对应选项卡进入其他选项卡页面，使得我们的应用形式更加丰富：

app3.py

import dash import dash_html_components as html import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div( dbc.Container( dbc.Tabs( [ dbc.Tab( [ html.Br(), html.P('这是选项卡1') ], label='选项卡1' ), dbc.Tab( [ html.Br(), html.P('这是选项卡2') ], label='选项卡2' ), dbc.Tab( [ html.Br(), html.P('这是选项卡3') ], label='选项卡3' ), ] ), style={'margin-top': '100px'} ) ) if __name__ == '__main__': app.run_server(debug=True)

　　这时每个Tab()下组织的内容就相当于独立的界面，非常的方便：

图4

　　并且Tab()提供了参数tab_style、label_style以及active_tab_style参数，使得我们可以分别设置选项卡容器、选项卡标签以及切换到对应选项卡后的标签样式：

app4.py

import dash import dash_bootstrap_components as dbc import dash_html_components as html app = dash.Dash(__name__) app.layout = html.Div( dbc.Container( dbc.Tabs( [ dbc.Tab(label='选项卡1', tab_style={'background-color': 'lightgrey'}), dbc.Tab(label='选项卡2', label_style={'color': 'red'}), dbc.Tab(label='选项卡3', tab_style={'margin-left': 'auto'}, active_label_style={'color': 'green'}), ] ), style={'margin-top': '100px'} ) ) if __name__ == '__main__': app.run_server(debug=True)

图5

　　这个例子涉及的部分内容可能你现在还不熟悉，不过没关系，我们会在之后专门单独的详细教程~

　　静态部件在Dash常用部件中虽然不承担更具功能性和交互性的作用，但是我们给编写的Dash应用增光添彩不可或缺的内容，这三期介绍的只是相对常用的一些静态部件，还有更多我们将会在之后偶然使用到时再提及，之后就会进入到Dash中承担web应用主要功能的各种交互部件的教程，敬请期待~