dash-bootstrap-警报

from logging import debug
import dash
from dash import Input, Output, State, html
import dash_bootstrap_components as dbc
from dash_bootstrap_components.themes import BOOTSTRAP

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
alerts = html.Div(
    [
        dbc.Alert(
            [
                "This is a danger alert with an ",
                # alert-link类可用于将警报内的链接与警报的颜色进行颜色匹配
                html.A("example link", href="#", className="alert-link"),
            ],
            color="primary",
        ),
        dbc.Alert(
            [
                # 添加标题和段落元素
                html.H4("Well done!", className="alert-heading"),
                html.P(
                    "This is a success alert with loads of extra text in it. So much "
                    "that you can see how spacing within an alert works with this "
                    "kind of content."
                ),
                # 加水平线
                html.Hr(),
                html.P(
                    "这是有淡入淡出效果的按钮!",
                    className="mb-0",
                ),
            ],
            color="secondary",
            id="alert-fade",
            # 设置dismissable=True为警报添加关闭按钮,单击时关闭警报框。
            # 也可以设置一个单独的按钮进行隐藏和显示警告框
            dismissable=True,
            is_open=True,
        ),
        dbc.Alert(
            "这是没有淡入淡出效果的按钮!",
            id="alert-no-fade",
            dismissable=True,
            fade=False,
            is_open=True,
            color="success",
            # className="d-inline-flex",可以实现容器外部随着内部的变化而改变宽度
            className="d-inline-flex",
        ),
        dbc.Alert(
            "This is a warning alert... be careful...",
            color="warning",
        ),
        dbc.Alert("This is a danger alert. Scary!", color="danger"),
        dbc.Alert("This is an info alert. Good to know!", color="info"),
        dbc.Alert("This is a light alert", color="light"),
    ]
)


app.layout = dbc.Container(alerts, fluid=True)
if __name__ == "__main__":
    app.run_server(debug=True)

你可能感兴趣的:(dash框架,python,bootstrap)