Python dash_core_components.Tab() Examples

The following are 7 code examples of dash_core_components.Tab(). You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may also want to check out all available functions/classes of the module dash_core_components , or try the search function .
Example #1
Source File: tabs_styled_with_classes.py    From dash-docs with MIT License 6 votes vote down vote up
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Tab content 1')
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Tab content 2')
        ])
    elif tab == 'tab-3':
        return html.Div([
            html.H3('Tab content 3')
        ])
    elif tab == 'tab-4':
        return html.Div([
            html.H3('Tab content 4')
        ]) 
Example #2
Source File: layout.py    From dtale with GNU Lesser General Public License v2.1 5 votes vote down vote up
def build_tab(label, value, additional_style=None, **kwargs):
    """
    Builds a :dash:`dash_core_components.Tab <dash-core-components/tab>` with standard styling settings.
    """
    base_style = {"borderBottom": "1px solid #d6d6d6", "padding": "6px"}
    return dcc.Tab(
        label=label,
        value=value,
        style=dict_merge(base_style, {"fontWeight": "bold"}, additional_style or {}),
        disabled_style=dict_merge(
            base_style,
            {
                "fontWeight": "bold",
                "backgroundColor": "LightGray",
                "color": "black",
                "cursor": "not-allowed",
            },
            additional_style or {},
        ),
        selected_style=dict_merge(
            base_style,
            {
                "borderTop": "1px solid #d6d6d6",
                "backgroundColor": "#2a91d1",
                "color": "white",
            },
            additional_style or {},
        ),
        **kwargs
    ) 
Example #3
Source File: tabs_callback.py    From dash-docs with MIT License 5 votes vote down vote up
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Tab content 1')
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Tab content 2')
        ]) 
Example #4
Source File: tabs_callback_graph.py    From dash-docs with MIT License 5 votes vote down vote up
def render_content(tab):
    if tab == 'tab-1-example-graph':
        return html.Div([
            html.H3('Tab content 1'),
            dcc.Graph(
                id='graph-1-tabs',
                figure={
                    'data': [{
                        'x': [1, 2, 3],
                        'y': [3, 1, 2],
                        'type': 'bar'
                    }]
                }
            )
        ])
    elif tab == 'tab-2-example-graph':
        return html.Div([
            html.H3('Tab content 2'),
            dcc.Graph(
                id='graph-2-tabs',
                figure={
                    'data': [{
                        'x': [1, 2, 3],
                        'y': [5, 10, 6],
                        'type': 'bar'
                    }]
                }
            )
        ]) 
Example #5
Source File: tabs_callback.py    From dash-docs with MIT License 5 votes vote down vote up
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Tab content 1')
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Tab content 2')
        ]) 
Example #6
Source File: tabs_styled_with_props.py    From dash-docs with MIT License 5 votes vote down vote up
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Tab content 1')
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Tab content 2')
        ]) 
Example #7
Source File: app.py    From dash-bio with MIT License 3 votes vote down vote up
def layout():
    return html.Div(id='ideogram-body', className='app-body', children=[
        dcc.Loading(className='dashbio-loading', children=html.Div(id='ideogram-container')),
        html.Div(className='control-tabs', children=[
            dcc.Tabs(id='ideogram-control-tabs', value='what-is', children=[
                dcc.Tab(
                    label='About',
                    value='what-is',
                    children=html.Div(className='control-tab', children=[
                        html.H4(className='what-is', children='What is Ideogram?'),
                        html.P('Ideogram is a tool used to schematically '
                               'represent chromosomes. Bands on the chromosomes '
                               'can show the locations of specific genes.'),
                        html.P('In the "View" tab, you can choose to interact '
                               'with several different features of the Ideogram '
                               'component. You can customize the appearance of '
                               'the ideogram, as well as choose a different '
                               'organism to display, under the "Custom" option. '
                               'The homology, brush, and annotation features '
                               'are demonstrated under the corresponding options.')
                    ])
                ),
                dcc.Tab(
                    label='View',
                    value='view',
                    children=html.Div(className='control-tab', children=[
                        html.Div(id='ideogram-feature-select', children=[
                            html.Div(className='app-controls-block', children=[
                                html.Div(
                                    className='app-controls-name',
                                    children='View feature:'
                                ),
                                dcc.Dropdown(
                                    className='ideogram-dropdown',
                                    id='ideogram-feature-dropdown',
                                    options=[
                                        {'label': 'Customizability', 'value': 'custom'},
                                        {'label': 'Homology', 'value': 'homology'},
                                        {'label': 'Brush', 'value': 'brush'},
                                        {'label': 'Annotations', 'value': 'annotations'}
                                    ],
                                    clearable=False,
                                    value='custom'
                                )
                            ]),
                        ]),
                        html.Hr(),
                        html.Div(
                            id='ideogram-feature-view-options'
                        )
                    ])
                )
            ])
        ]),
        dcc.Store(id='ideo-custom-data', data=ideograms_initial['custom']),
        dcc.Store(id='ideo-homology-data', data=ideograms_initial['homology']),
        dcc.Store(id='brush-ideo-data', data=ideograms_initial['brush']),
        dcc.Store(id='ideo-annotations-data', data=ideograms_initial['annotations'])
    ])