Python数据可视化Dash开源库Bootstrap信息提示框Alert

boyanx3个月前 (09-18)技术教程9

本章关键字：Python做Web网页开发、Dash开源库Bootstrap、信息提示框用法、Bootstrap库Alert函数用法

本章节我们来了解了Python数据可视化Dash框架中的开源库Dash Bootstrap Components组件中信息提示框Alert的基本用法，使用Alert组件为用户操作提供上下文反馈消息。

信息提示框也可以叫做警告框，警告框通常用于输出一些对用户的提示信息，比如在用户输入了错误格式数据时，警告提醒一下用户原因。

接下来，我们来介绍一下Alert这个控件，以及在Python中如何使用Alert，我简单写了一个Demo，效果如下图展示（如果想了解更多内容，可以关注我，对于整个示例的Demo可私信我获取），

此控件的Demo代码如下所示，更多内容可私信我：

import dash_bootstrap_components as dbc
from dash import html, Input, Output, State
from server import app

alert_html = html.Div([
    html.Br(),
    html.P(html.Strong('使用Alert组件为用户操作提供上下文反馈消息, 提醒控件', style={'color': 'rgb(255, 153, 51)'})),
    dbc.Button('关闭或显示一条警报', id='alert-toggle', className='me-1', n_clicks=0),
    html.Hr(),
    dbc.Alert('我是一条警报', 
              id='alert-fade', 
              dismissable=True, # 为警报添加一个解除按钮，单击后关闭警报
              is_open=True,
              fade=True,
              duration=2000, # 警报自动解除的时间，配合fade=True时使用
              color='warning'),
])

@app.callback(
    Output('alert-fade', 'is_open'),
    [Input('alert-toggle', 'n_clicks')],
    [State('alert-fade', 'is_open')]
)
def toggle_alert(n, is_open):
    if n:
        return not is_open
    return is_open

接下来，我们来详细介绍下这alert组件的一些参数

Alert

children：该组件的子组件，可传入list或者单个的dash组件，也可传入字符串或者数字。
id：此组件的ID，用于识别回调中的Dash组件。ID在应用中的所有组件中都必须是唯一的。
class_name：字符串，通常与CSS一起使用，以设置具有公共属性的元素的样式。
color：类型是string，默认success，警告框的颜色，选项有：primary, secondary, success, info, warning, danger, link或任何有效的CSS颜色的选择(例如十六进制代码，十进制代码或CSS颜色名称)
dismissable：类型是boolean，如果为True，则添加一个关闭按钮，允许取消警告框。
duration：类似是number，持续时间(以毫秒为单位)，警报将自行解散。
fade：类型是boolean，如果为True，当is_open被切换时将应用一个渐变动画。如果为False，警报将简单地出现和消失。
key：类型是string，组件的唯一标识符，用于在呈现组件时提高React.js的性能，参见https://reactjs.org/docs/lists-and-keys.html了解更多信息。
loading_state：类型是dict，该对象保存来自dash-renderer的加载状态。
persisted_props：类似是list，在刷新组件或页面后，其用户交互将持续存在的属性。因为只允许value，所以通常可以忽略这个道具。
persistence：布尔或字符串或数字，用于允许在刷新组件(或页面)时保持此组件中的用户交互。如果persistent是真值，并且没有从它之前的值发生变化，那么用户在使用应用程序时更改的值将保持该变化，只要新值也匹配最初给出的值。与persistence_type一起使用。
persistence_type：值等于'local'， 'session'， 'memory'，默认'local'，持久用户更改的存储位置:内存:只保存在内存中，在页面刷新时重置。本地:窗口。localStorage，在浏览器退出后保存数据。会话:窗口。sessionStorage，一旦浏览器退出，数据将被清除。
style：定义将覆盖先前设置的样式的CSS样式。