Python dash_html_components.H4 Examples

def display_page(pathname):
    print(pathname)
    if pathname == '/':
        return html.Div([
            html.Div('You are on the index page.'),

            # the dcc.Link component updates the `Location` pathname
            # without refreshing the page
            dcc.Link(html.A('Go to page 2 without refreshing!'), href="/page-2", style={'color': 'blue', 'text-decoration': 'none'}),
            html.Hr(),
            html.A('Go to page 2 but refresh the page', href="/page-2")
        ])
    elif pathname == '/page-2':
        return html.Div([
            html.H4('Welcome to Page 2'),
            dcc.Link(html.A('Go back home'), href="/"),
        ])
    else:
        return html.Div('I guess this is like a 404 - no content available')

# app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"}) 

def plot_option_layout(self) -> List[html.Div]:
        """Renders a dropdown widget for each plot option"""
        divs = []
        # The plot type dropdown is handled separate
        divs.append(
            html.Div(
                style=self.style_options_div,
                children=[
                    html.H4("Set plot options"),
                    html.P("Plot type"),
                    dcc.Dropdown(
                        id=self.uuid("plottype"),
                        clearable=False,
                        options=[{"label": i, "value": i} for i in self.plots],
                        value=self.plot_options.get("type", "scatter"),
                    ),
                ],
            )
        )
        # Looping through all available plot options
        # and renders a dropdown widget
        for key, arg in self.plot_args.items():
            divs.append(
                html.Div(
                    style=self.style_options_div_hidden,
                    id=self.uuid(f"div-{key}"),
                    children=[
                        html.P(key),
                        dcc.Dropdown(
                            id=self.uuid(f"dropdown-{key}"),
                            clearable=arg["clearable"],
                            options=[{"label": i, "value": i} for i in arg["options"]],
                            value=arg["value"],
                            multi=arg["multi"],
                        ),
                    ],
                )
            )
        return divs 

def section_title(title):
    return html.H4(title, style={"marginTop": "20px"}) 

def section_title(title):
    return html.H4(title, style={"marginTop": "20px"}) 

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'])
    ])