如何在Dash中创建选项卡和子选项卡？

在Dash框架中创建选项卡和子选项卡可以通过使用dcc.Tabs和dcc.Tab组件来实现。以下是一个简单的示例，展示了如何创建选项卡和子选项卡，并为每个选项卡和子选项卡分配内容。

基础概念

Dash: 是一个用于构建Web应用程序的Python框架，基于Flask、Plotly.js和React.js。
dcc.Tabs: 用于创建一组选项卡。
dcc.Tab: 用于定义单个选项卡。

示例代码

import dash
from dash import dcc, html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Tabs(id='tabs-example', value='tab-1', children=[
        dcc.Tab(label='Tab 1', value='tab-1'),
        dcc.Tab(label='Tab 2', value='tab-2'),
    ]),
    html.Div(id='tabs-content')
])

@app.callback(Output('tabs-content', 'children'),
              [Input('tabs-example', 'value')])
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Tab content 1'),
            dcc.Tabs(id='subtabs-example', value='subtab-1', children=[
                dcc.Tab(label='Subtab 1', value='subtab-1'),
                dcc.Tab(label='Subtab 2', value='subtab-2'),
            ]),
            html.Div(id='subtabs-content')
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Tab content 2')
        ])

@app.callback(Output('subtabs-content', 'children'),
              [Input('subtabs-example', 'value')])
def render_subcontent(subtab):
    if subtab == 'subtab-1':
        return html.Div([
            html.H3('Subtab content 1')
        ])
    elif subtab == 'subtab-2':
        return html.Div([
            html.H3('Subtab content 2')
        ])

if __name__ == '__main__':
    app.run_server(debug=True)