本章关键字：Python做Web网页开发、Dash开源库Bootstrap用法、徽章组件Badge用法

本章节我们来了解了Python数据可视化Dash框架中的开源库Dash Bootstrap Components组件中的徽章组件Badge的基本用法，在了解之前，我们先来简单了解下徽章的用途。

徽章的用途

徽章可以用于计数，例如你有N条未读消息；

徽章也可用来标识一些新发布的信息、一些热门的信息等。

徽章通常用于标题、导航栏、按钮或头像的右侧的一个小区域内。

徽章在我们Demo下的展示效果，如图

接下来，介绍下徽章控件的主要函数的用法，主要用到Dash Bootstrap控件库中的Badge()函数，我们来介绍下这个函数的参数情况。

Badge函数参数介绍

• 像这些之前文章中介绍过的公共参数，例如：children、id、class_name、style、key、color、loading_state这些，大家可以翻看我以前的文章，这里就不进行过多介绍了。
• href：附加到徽章的链接。
• n_clicks：表示该元素被点击的次数的整数。
• n_clicks_timestamp：表示n_clicks发生变化的时间(自1970年以来的毫秒)的整数。这可以用来判断哪个按钮最近被更改过。
• pill：把徽章做成药丸形状(圆形末端，像药丸一样)。默认值:False。
• tag：用于Badge的HTML标记。默认值：span。
• target：要传递给链接的目标属性。只适用于外部链路。
• text_color：徽章颜色。
• title：设置底层HTML按钮的标题属性。

Demo代码示例

import dash_bootstrap_components as dbc
from dash import html, Input, Output, callback

badge_html = html.Div(
    [
        html.Br(),
        html.P(html.Strong('Badge: 在dash-Bootstrap组件中使用Bootstrap徽章, '
                           '徽章可以作为按钮或链接的一部分，以提供计数器', style={'color': 'rgb(255, 153, 51)'}),),
        html.Hr(),
        dbc.Button('模拟发送消息', id='notify_btn_msg_send', n_clicks=0),
        html.Hr(),
        dbc.Button(
            [
                "未读消息",
                dbc.Badge(
                    "0", 
                    id='msg_count',
                    color="danger", 
                    pill=True,
                    text_color="white", 
                    className="position-absolute top-0 start-100 translate-middle"
                ),
            ],
            color="warning",
            class_name="position-relative",
        )
    ]
)

@callback(Output('msg_count', 'children'), [Input('notify_btn_msg_send', 'n_clicks')])
def on_button_click(n):
    if n > 10:
        return f'10+'
    else:
        return f'{n}'

此Demo，我们做了一个限制，例如当未读信息超过10条时，直接显示10+，具体可以对应Demo代码，理解各个参数的含义，如果想了解更多内容，可关注我，对于整个示例的Demo可私信我获取。