mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-13 11:34:02 +08:00
Popconfirm: Add popconfirm component (#17548)
* init * init * init docs * init docs2 * init type * update test * update naming
This commit is contained in:
iamkun
54
examples/docs/en-US/popconfirm.md
Normal file
54
examples/docs/en-US/popconfirm.md
Normal file
@@ -0,0 +1,54 @@
|
||||
## Popconfirm
|
||||
|
||||
A simple confirmation dialog of an element click action.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
|
||||
|
||||
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
title="Are you sure to delete this?"
|
||||
>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
````
|
||||
:::
|
||||
|
||||
### Customise
|
||||
You can customise Popconfirm like:
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
confirmButtonText='OK'
|
||||
cancelButtonText='No, Thanks'
|
||||
icon="el-icon-info"
|
||||
iconColor="red"
|
||||
title="Are you sure to delete this?"
|
||||
>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| title | Title | String | — | — |
|
||||
| confirmButtonText | Confirm button text | String | — | — |
|
||||
| cancelButtonText | Cancel button text | String | — | — |
|
||||
| confirmButtonType | Confirm button type | String | — | Primary |
|
||||
| cancelButtonType | Cancel button type | String | — | Text |
|
||||
| icon | Icon | String | — | el-icon-question |
|
||||
| iconColor | Icon color | String | — | #f90 |
|
||||
| hideIcon | is hide Icon | Boolean | — | false |
|
||||
|
||||
### Slot
|
||||
| Name | Description |
|
||||
|--- | ---|
|
||||
| reference | HTML element that triggers Popconfirm |
|
||||
54
examples/docs/es/popconfirm.md
Normal file
54
examples/docs/es/popconfirm.md
Normal file
@@ -0,0 +1,54 @@
|
||||
## Popconfirm
|
||||
|
||||
A simple confirmation dialog of an element click action.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
|
||||
|
||||
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
title="Are you sure to delete this?"
|
||||
>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
````
|
||||
:::
|
||||
|
||||
### Customise
|
||||
You can customise Popconfirm like:
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
confirmButtonText='OK'
|
||||
cancelButtonText='No, Thanks'
|
||||
icon="el-icon-info"
|
||||
iconColor="red"
|
||||
title="Are you sure to delete this?"
|
||||
>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| title | Title | String | — | — |
|
||||
| confirmButtonText | Confirm button text | String | — | — |
|
||||
| cancelButtonText | Cancel button text | String | — | — |
|
||||
| confirmButtonType | Confirm button type | String | — | Primary |
|
||||
| cancelButtonType | Cancel button type | String | — | Text |
|
||||
| icon | Icon | String | — | el-icon-question |
|
||||
| iconColor | Icon color | String | — | #f90 |
|
||||
| hideIcon | is hide Icon | Boolean | — | false |
|
||||
|
||||
### Slot
|
||||
| Name | Description |
|
||||
|--- | ---|
|
||||
| reference | HTML element that triggers Popconfirm |
|
||||
54
examples/docs/fr-FR/popconfirm.md
Normal file
54
examples/docs/fr-FR/popconfirm.md
Normal file
@@ -0,0 +1,54 @@
|
||||
## Popconfirm
|
||||
|
||||
A simple confirmation dialog of an element click action.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
|
||||
|
||||
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
title="Are you sure to delete this?"
|
||||
>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
````
|
||||
:::
|
||||
|
||||
### Customise
|
||||
You can customise Popconfirm like:
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
confirmButtonText='OK'
|
||||
cancelButtonText='No, Thanks'
|
||||
icon="el-icon-info"
|
||||
iconColor="red"
|
||||
title="Are you sure to delete this?"
|
||||
>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| title | Title | String | — | — |
|
||||
| confirmButtonText | Confirm button text | String | — | — |
|
||||
| cancelButtonText | Cancel button text | String | — | — |
|
||||
| confirmButtonType | Confirm button type | String | — | Primary |
|
||||
| cancelButtonType | Cancel button type | String | — | Text |
|
||||
| icon | Icon | String | — | el-icon-question |
|
||||
| iconColor | Icon color | String | — | #f90 |
|
||||
| hideIcon | is hide Icon | Boolean | — | false |
|
||||
|
||||
### Slot
|
||||
| Name | Description |
|
||||
|--- | ---|
|
||||
| reference | HTML element that triggers Popconfirm |
|
||||
54
examples/docs/zh-CN/popconfirm.md
Normal file
54
examples/docs/zh-CN/popconfirm.md
Normal file
@@ -0,0 +1,54 @@
|
||||
## Popconfirm 气泡确认框
|
||||
|
||||
点击元素，弹出气泡确认框。
|
||||
|
||||
### 基础用法
|
||||
|
||||
Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。
|
||||
:::demo 在 Popconfirm 中，只有 `title` 属性可用，`content` 属性不会被展示。
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
title="这是一段内容确定删除吗？"
|
||||
>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
````
|
||||
:::
|
||||
|
||||
### 自定义
|
||||
|
||||
可以在 Popconfirm 中自定义内容。
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
confirmButtonText='好的'
|
||||
cancelButtonText='不用了'
|
||||
icon="el-icon-info"
|
||||
iconColor="red"
|
||||
title="这是一段内容确定删除吗？"
|
||||
>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| title | 标题 | String | — | — |
|
||||
| confirmButtonText | 确认按钮文字 | String | — | — |
|
||||
| cancelButtonText | 取消按钮文字 | String | — | — |
|
||||
| confirmButtonType | 确认按钮类型 | String | — | Primary |
|
||||
| cancelButtonType | 取消按钮类型 | String | — | Text |
|
||||
| icon | Icon | String | — | el-icon-question |
|
||||
| iconColor | Icon 颜色 | String | — | #f90 |
|
||||
| hideIcon | 是否隐藏 Icon | Boolean | — | false |
|
||||
|
||||
### Slot
|
||||
| 参数 | 说明 |
|
||||
|--- | ---|
|
||||
| reference | 触发 Popconfirm 显示的 HTML 元素 |
|
||||
Reference in New Issue
Block a user