:::demo Element Plus has registered the `$notify` method and it receives an object as its parameter. In the simplest case, you can set the `title` field and the` message` field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting `duration` you can control its duration. Specifically, if set to `0`, it will not close automatically. Note that `duration` receives a `Number` in milliseconds.
:::demo Element Plus provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open3` and `open4` without passing a `type` field.
:::demo The `position` attribute defines which corner Notification slides in. It can be `top-right`, `top-left`, `bottom-right` or `bottom-left`. Defaults to `top-right`.
```html
<template>
<el-button
plain
@click="open1">
Top Right
</el-button>
<el-button
plain
@click="open2">
Bottom Right
</el-button>
<el-button
plain
@click="open3">
Bottom Left
</el-button>
<el-button
plain
@click="open4">
Top Left
</el-button>
</template>
<script>
export default {
methods: {
open1() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the top right corner'
});
},
open2() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the bottom right corner',
position: 'bottom-right'
});
},
open3() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the bottom left corner',
position: 'bottom-left'
});
},
open4() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the top left corner',
position: 'top-left'
});
}
}
}
</script>
```
:::
### With offset
Customize Notification's offset from the edge of the screen.
:::demo Set the `offset` attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.
```html
<template>
<el-button
plain
@click="open">
Notification with offset
</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$notify.success({
title: 'Success',
message: 'This is a success message',
offset: 100
});
}
}
}
</script>
```
:::
### Use HTML string
`message` supports HTML string.
:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
```html
<template>
<el-button
plain
@click="open">
Use HTML String
</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$notify({
title: 'HTML String',
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>'
});
}
}
}
</script>
```
:::
:::warning
Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
:::
### Hide close button
It is possible to hide the close button
:::demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user.
```html
<template>
<el-button
plain
@click="open">
Hide close button
</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$notify.success({
title: 'Info',
message: 'This is a message without close button',
In this case you should call `Notification(options)`. We have also registered methods for different types, e.g. `Notification.success(options)`. You can call `Notification.closeAll()` to manually close all the instances.
