xxxxxxxxxx1
<!-- Trigger buttons -->2
<button type="button" class="btn btn-primary" id="basic-primary-trigger" data-mdb-ripple-init>Primary</button>3
<button type="button" class="btn btn-secondary" id="basic-secondary-trigger" data-mdb-ripple-init>Secondary</button>4
<button type="button" class="btn btn-success" id="basic-success-trigger" data-mdb-ripple-init>Success</button>5
<button type="button" class="btn btn-danger" id="basic-danger-trigger" data-mdb-ripple-init>Danger</button>6
<button type="button" class="btn btn-warning" id="basic-warning-trigger" data-mdb-ripple-init>Warning</button>7
<button type="button" class="btn btn-info" id="basic-info-trigger" data-mdb-ripple-init>Info</button>8
<button type="button" class="btn btn-light" id="basic-light-trigger" data-mdb-ripple-init>Light</button>9
<button type="button" class="btn btn-dark" id="basic-dark-trigger" data-mdb-ripple-init>Dark</button>10
11
<!-- Toasts -->12
<div13
class="toast fade mx-auto"14
id="basic-primary-example"15
role="alert"16
aria-live="assertive"17
aria-atomic="true"18
data-mdb-toast-init19
data-mdb-autohide="false"20
data-mdb-delay="2000"21
data-mdb-position="top-right"22
data-mdb-append-to-body="true"23
data-mdb-stacking="true"24
data-mdb-width="350px"25
data-mdb-color="primary"26
>27
<div class="toast-header">28
<strong class="me-auto">MDBootstrap</strong>29
<small>11 mins ago</small>30
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>31
</div>32
<div class="toast-body"><a href="http://cyclr.com">A link to Cyclr.com</a></div>33
</div>34
35
<div36
class="toast fade mx-auto"37
id="basic-secondary-example"38
role="alert"39
aria-live="assertive"40
aria-atomic="true"41
data-mdb-toast-init42
data-mdb-autohide="true"43
data-mdb-delay="2000"44
data-mdb-position="top-right"45
data-mdb-append-to-body="true"46
data-mdb-stacking="true"47
data-mdb-width="350px"48
data-mdb-color="secondary"49
>50
<div class="toast-header">51
<strong class="me-auto">MDBootstrap</strong>52
<small>11 mins ago</small>53
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>54
</div>55
<div class="toast-body">Secondary Basic Example</div>56
</div>57
58
<div59
class="toast fade mx-auto"60
id="basic-success-example"61
role="alert"62
aria-live="assertive"63
aria-atomic="true"64
data-mdb-toast-init65
data-mdb-autohide="true"66
data-mdb-delay="2000"67
data-mdb-position="top-right"68
data-mdb-append-to-body="true"69
data-mdb-stacking="true"70
data-mdb-width="350px"71
data-mdb-color="success"72
>73
<div class="toast-header">74
<strong class="me-auto">MDBootstrap</strong>75
<small>11 mins ago</small>76
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>77
</div>78
<div class="toast-body">Success Basic Example</div>79
</div>80
81
<div82
class="toast fade mx-auto"83
id="basic-danger-example"84
role="alert"85
aria-live="assertive"86
aria-atomic="true"87
data-mdb-toast-init88
data-mdb-autohide="true"89
data-mdb-delay="2000"90
data-mdb-position="top-right"91
data-mdb-append-to-body="true"92
data-mdb-stacking="true"93
data-mdb-width="350px"94
data-mdb-color="danger"95
>96
<div class="toast-header">97
<strong class="me-auto">MDBootstrap</strong>98
<small>11 mins ago</small>99
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>100
</div>101
<div class="toast-body">Danger Basic Example</div>102
</div>103
104
<div105
class="toast fade mx-auto"106
id="basic-warning-example"107
role="alert"108
aria-live="assertive"109
aria-atomic="true"110
data-mdb-toast-init111
data-mdb-autohide="true"112
data-mdb-delay="2000"113
data-mdb-position="top-right"114
data-mdb-append-to-body="true"115
data-mdb-stacking="true"116
data-mdb-width="350px"117
data-mdb-color="warning"118
>119
<div class="toast-header">120
<strong class="me-auto">MDBootstrap</strong>121
<small>11 mins ago</small>122
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>123
</div>124
<div class="toast-body">Warning Basic Example</div>125
</div>126
127
<div128
class="toast fade mx-auto"129
id="basic-info-example"130
role="alert"131
aria-live="assertive"132
aria-atomic="true"133
data-mdb-toast-init134
data-mdb-autohide="true"135
data-mdb-delay="2000"136
data-mdb-position="top-right"137
data-mdb-append-to-body="true"138
data-mdb-stacking="true"139
data-mdb-width="350px"140
data-mdb-color="info"141
>142
<div class="toast-header">143
<strong class="me-auto">MDBootstrap</strong>144
<small>11 mins ago</small>145
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>146
</div>147
<div class="toast-body">Info Basic Example</div>148
</div>149
150
<div151
class="toast fade mx-auto"152
id="basic-light-example"153
role="alert"154
aria-live="assertive"155
aria-atomic="true"156
data-mdb-toast-init157
data-mdb-autohide="true"158
data-mdb-delay="2000"159
data-mdb-position="top-right"160
data-mdb-append-to-body="true"161
data-mdb-stacking="true"162
data-mdb-width="350px"163
data-mdb-color="light"164
>165
<div class="toast-header">166
<strong class="me-auto">MDBootstrap</strong>167
<small>11 mins ago</small>168
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>169
</div>170
<div class="toast-body">Light Basic Example</div>171
</div>172
173
<div174
class="toast fade mx-auto"175
id="basic-dark-example"176
role="alert"177
aria-live="assertive"178
aria-atomic="true"179
data-mdb-toast-init180
data-mdb-autohide="true"181
data-mdb-delay="2000"182
data-mdb-position="top-right"183
data-mdb-append-to-body="true"184
data-mdb-stacking="true"185
data-mdb-width="350px"186
data-mdb-color="dark"187
>188
<div class="toast-header">189
<strong class="me-auto">MDBootstrap</strong>190
<small>11 mins ago</small>191
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>192
</div>193
<div class="toast-body">Dark Basic Example</div>194
</div>1
1
xxxxxxxxxx1
const toasts = [2
'basic-primary-example',3
'basic-secondary-example',4
'basic-success-example',5
'basic-danger-example',6
'basic-warning-example',7
'basic-info-example',8
'basic-light-example',9
'basic-dark-example',10
];11
12
const triggers = [13
'basic-primary-trigger',14
'basic-secondary-trigger',15
'basic-success-trigger',16
'basic-danger-trigger',17
'basic-warning-trigger',18
'basic-info-trigger',19
'basic-light-trigger',20
'basic-dark-trigger',21
];22
23
triggers.forEach((trigger, index) => {24
let basicInstance = mdb.Toast.getInstance(document.getElementById(toasts[index]));25
document.getElementById(trigger).addEventListener('click', () => {26
basicInstance.show();27
});28
}); Console errors: 0