通知／Notification

# 通知／Notification

<p class="uk-text-lead">创建可以切换显示和自动淡出的通知。</p>

## Usage-用法

当您将鼠标悬停在通知消息上面时，通知将不会自动消失，持续保持可见状态，直到您停止将鼠标悬停在其上面为止。 也可以通过单击关闭通知。 为了显示通知，该组件提供了一个简单的 JavaScript API。以下代码段可帮助您入门。

### JavaScript

```js
UIkit.notification({
    message: 'my-message!',
    status: 'primary',
    pos: 'top-right',
    timeout: 5000
});

// Shortcuts
UIkit.notification('My message');
UIkit.notification('My message', status);
UIkit.notification('My message', { /* options */ });
```

```example
<button class="demo uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Notification message'})">Click me</button>

```

***

## HTML message-带HTML的消息

您可以在通知消息中使用HTML代码，例如图标组件中的图标。

```js
UIkit.notification("<span uk-icon='icon: check'></span> Message");
```

```example
<button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: '<span uk-icon=\'icon: check\'></span> Message with an icon'})">With icon</button>

```

***

## Position-定位

添加以下参数可以调整通知消息的位置。


```js
UIkit.notification("...", {pos: 'top-right'})
```

| Position        | Code                                                |
|:----------------|:----------------------------------------------------|
| `top-left`      | `UIkit.notification("...", {pos: 'top-left'})`      |
| `top-center`    | `UIkit.notification("...", {pos: 'top-center'})`    |
| `top-right`     | `UIkit.notification("...", {pos: 'top-right'})`     |
| `bottom-left`   | `UIkit.notification("...", {pos: 'bottom-left'})`   |
| `bottom-center` | `UIkit.notification("...", {pos: 'bottom-center'})` |
| `bottom-right`  | `UIkit.notification("...", {pos: 'bottom-right'})`  |


```example
<p uk-margin>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Top Left...', pos: 'top-left'})">Top Left</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Top Center...', pos: 'top-center'})">Top Center</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Top Right...', pos: 'top-right'})">Top Right</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Bottom Left...', pos: 'bottom-left'})">Bottom Left</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Bottom Center...', pos: 'bottom-center'})">Bottom Center</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Bottom Right...', pos: 'bottom-right'})">Bottom Right</button>
</p>
```


***

## Style-样式

可以通过在消息中添加状态来设置通知的样式，来表示重要、成功、警告或危险等不同状态。

```js
UIkit.notification("...", {status: 'primary'})
```

| Style     | Code                                            |
|:----------|:------------------------------------------------|
| `primary` | `UIkit.notification("...", {status:'primary'})` |
| `success` | `UIkit.notification("...", {status:'success'})` |
| `warning` | `UIkit.notification("...", {status:'warning'})` |
| `danger`  | `UIkit.notification("...", {status:'danger'})`  |

```example
<p uk-margin>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Primary message...', status: 'primary'})">Primary</button>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Success message...', status: 'success'})">Success</button>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Warning message...', status: 'warning'})">Warning</button>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Danger message...', status: 'danger'})">Danger</button>
</p>
```

***

## Close all-关闭所有

可以通过调用 `UIkit.notification.closeAll()`来关闭所有打开的通知。

```example
<button class="uk-button uk-button-default close" onclick="UIkit.notification.closeAll()">Close All</button>

```

***

## Component options-组件选项

可以在组件属性中使用以下选项，用分号隔开多个选项。 [了解更多](javascript.md#component-configuration)

| 选项     | 可选值   | 默认值      | 描述                                                         |
|:-----------|:--------|:-------------|:--------------------------------------------------------------------|
| `message ` | String  | `false`      | 要显示的通知消息。                                       |
| `status`   | String  | `null`       | 通知的状态颜色。                                          |
| `timeout`  | Integer | `5000`       | 通知消失之前的可见时长。                |
| `group`    | String  | `null`       | 关闭某一组中的所有通知 |
| `pos`      | String  | `top-center` | 显示在哪个位置。          |

***

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 初始化

这是一个功能性组件 `Functional Component` ，可以省略元素参数。

```js
UIkit.notification(options);
UIkit.notification(message, status);
```

### 事件

将在附加了此组件的元素上触发以下事件：

| Name | Description |
| --- | --- |
| `close` | Fires after the notification has been closed. |

### 方法

以下方法可用于该组件：

#### 关闭

```js
UIkit.notification(element).close(immediate);
```

关闭通知。

| Name        | 类型    | 默认值 | 描述                      |
|:------------|:--------|:--------|:---------------------------------|
| `immediate` | Boolean | true    | 将通知移出。 |