敬酒 MDB Pro component
吐司-Bootstrap 5和Material Design 2.0组件
通过“吐司”向您的访客推送通知,“吐司”是一种轻便且易于定制的 警报消息。吐司旨在模仿已经流行的推送通知 通过移动和桌面操作系统。
注意:阅读 API 标签以找到所有可用选项,然后 高级定制
基本例子
单击按钮启动烤面包。
MDBootstrap
11 mins ago
Primary Basic Example
MDBootstrap
11 mins ago
Secondary Basic Example
MDBootstrap
11 mins ago
Success Basic Example
MDBootstrap
11 mins ago
Danger Basic Example
MDBootstrap
11 mins ago
Warning Basic Example
MDBootstrap
11 mins ago
Info Basic Example
MDBootstrap
11 mins ago
Light Basic Example
MDBootstrap
11 mins ago
Dark Basic Example
静态例子
MDBootstrap
11 mins ago
Static Example
色彩
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
放置
您可以使用设置每个通知的位置
data-mdb-position
属性或 update()
方法。
选择水平/垂直对齐
Current position: top-right
MDBootstrap
11 mins ago
Toast placement
抵消
您还可以使用更改每个通知的偏移量
data-mdb-offset
属性或 update()
方法。
MDBootstrap
11 mins ago
Offset: 50
容器
您可以在任何地方显示通知。只需将吐司放入目标元素中并填充
data-mdb-container
属性,其ID为父级或
update()
方法。
MDBootstrap
11 mins ago
Toast inside another element!
堆码
您可以使用以下方式打开/关闭堆叠通知
data-mdb-stacking
属性或 update()
方法。
堆放(容器)
您可以使用以下方式打开/关闭堆叠通知
data-mdb-stacking
属性或 update()
方法。
敬酒 - API
用法
通过数据属性
<div
class="toast"
id="example-toast"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-autohide="false"
data-mdb-position="..."
data-mdb-container="..."
data-mdb-offset="..."
>
<div class="toast-header">
<svg
class="bd-placeholder-img rounded me-2"
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
role="img"
focusable="false"
>
<rect width="100%" height="100%" fill="#007aff"></rect>
</svg>
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button
type="button"
class="ms-2 mb-1 close"
data-mdb-dismiss="toast"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">Example toast</div>
</div>
通过JavaScript
mdb.Toast.getInstance(document.getElementById('placement-example-toast')).update({ position:
..., offset: ..., container: ..., });
通过jQuery
注意:默认情况下,MDB 不包含jQuery,并且您拥有 自行添加到项目中。
$('.example-class').toast(options);
选件
Name | Type | Default | Description |
---|---|---|---|
width
|
String / null | null |
Defines the width of a toast |
position
|
String | 'top-left' |
Changes position of toast |
color
|
String |
|
Sets background of a toast (basic MDB colors) |
offset |
Number | '10' |
Changes offset of toast |
container
|
String | - |
Defines id/class of parent element |
autohide
|
Boolean | true |
Toasts will hide automatically or not |
animation
|
Boolean | true |
Toasts will be animated or not |
delay |
Boolean | 500 |
Sets length of animation delay |
appendToBody
|
Boolean | false |
Appends element to the end of body |
stacking
|
Boolean | true |
Enables stacking notifications |
方法
Name | Parameters | Description | Example |
---|---|---|---|
show |
- | Shows toast | instance.show() |
hide |
- | Hides toast | instance.hide() |
dispose
|
- | Removes a mdb.Toast instance |
instance.dispose()
|
update |
options (Object) | Updates options of mdb.Toast instance |
instance.update({position: 'top-center'})
|
mdb.Toast.getInstance(document.getElementById('show-example')).show();
大事记
Name | Description |
---|---|
show.mdb.toast
|
Emitted when a toast has been toggled |
shown.mdb.toast
|
Emitted once toast is shown |
hide.mdb.toast
|
Emitted when a toast has been toggled |
hidden.mdb.toast
|
Emitted once toast is hidden |
const instance = mdb.Toast.getInstance(document.getElementById('show-example'));
instance.addEventListener('hidden.mdb.toast', () => { // do something });
进口
MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:
import { Toast } from 'mdb-ui-kit';