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)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值