dash-bootstrap-components-徽章

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

badge = html.Div(
    [
        # 徽章外面可以加按钮
        dbc.Button(
            [
                "通知",
                # 设置徽章属性
                dbc.Badge("4", color="light", text_color="primary", className="ms-1"),
            ],
            color="primary",
        ),
        html.Div(
            [
                # 默认文本颜色 白色
                dbc.Badge(
                    "Primary",
                    color="primary",
                    # 可以加入链接，默认会有下划线，清除掉text-decoration-none
                    href="#",
                    className="me-1 text-decoration-none",
                ),
                dbc.Badge(
                    "Secondary，圆润一些",
                    color="secondary",
                    pill=True,
                    className="me-1 ",
                ),
                dbc.Badge(
                    "Success",
                    color="success",
                    # pill=True让徽章圆润一些
                    pill=True,
                    className="me-1",
                    href="#",
                ),
                dbc.Badge("Warning", color="warning", className="me-1"),
                dbc.Badge("Danger", color="danger", className="me-1"),
                dbc.Badge("Info", color="info", className="me-1"),
                # text_colo设置文本颜色
                dbc.Badge("Light", color="light", text_color="dark", className="me-1"),
                dbc.Badge("Dark", color="dark", className="me-1"),
                dbc.Button(
                    [
                        "通知",
                        # 设置徽章定位在按钮的某一个位置
                        dbc.Badge(
                            "99+",
                            color="danger",
                            pill=True,
                            text_color="white",
                            className="position-absolute top-0 start-100 translate-middle ",
                        ),
                    ],
                    color="primary",
                    className="position-relative",
                ),
            ]
        ),
    ]
)


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