本章关键字：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 dbcfrom dash import html, Input, Output, callbackbadge_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可私信我获取。