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-bootstrap-警报
最新推荐文章于 2024-09-03 08:14:33 发布