本章关键字:Python做Web网页开发、Dash开源库Bootstrap用法、徽章组件Badge用法
本章节我们来了解了Python数据可视化Dash框架中的开源库Dash Bootstrap Components组件中的徽章组件Badge的基本用法,在了解之前,我们先来简单了解下徽章的用途。
徽章可以用于计数,例如你有N条未读消息;
徽章也可用来标识一些新发布的信息、一些热门的信息等。
徽章通常用于标题、导航栏、按钮或头像的右侧的一个小区域内。
接下来,介绍下徽章控件的主要函数的用法,主要用到Dash Bootstrap控件库中的Badge()函数,我们来介绍下这个函数的参数情况。
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可私信我获取。
页面更新:2024-04-22
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号