test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-05 04:37:47 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(docs): Notification code for composition (#2328)

Browse Source 
Co-authored-by: xing.wu <wuxing@bjca.org.cn>
This commit is contained in:
Xing.Wu 2021-06-25 16:10:39 +08:00 committed by GitHub
parent bc8db66945
commit b9d94714d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 1035 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
website/docs/en-US/notification.md
View File

@ -42,6 +42,38 @@ Displays a global notification message at a corner of the page.
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: 'Title',
message: h('i', { style: 'color: teal' }, 'This is a reminder')
});
};
const open2 = () => {
ElNotification({
title: 'Prompt',
message: 'This is a message that does not automatically close',
duration: 0
});
};
return {
open1,
open2,
};
},
});
</setup>
-->
```
:::
@ -109,6 +141,55 @@ We provide four types: success, warning, info and error.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: 'Success',
message: 'This is a success message',
type: 'success',
});
};
const open2 = () => {
ElNotification({
title: 'Warning',
message: 'This is a warning message',
type: 'warning',
});
};
const open3 = () => {
ElNotification({
title: 'Info',
message: 'This is an info message',
});
};
const open4 = () => {
ElNotification({
title: 'Error',
message: 'This is an error message',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -177,6 +258,56 @@ Notification can emerge from any corner you like.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: 'Custom Position',
message: 'I\'m at the top right corner',
});
};
const open2 = () => {
ElNotification({
title: 'Custom Position',
message: 'I\'m at the bottom right corner',
position: 'bottom-right',
});
};
const open3 = () => {
ElNotification({
title: 'Custom Position',
message: 'I\'m at the bottom left corner',
position: 'bottom-left',
});
};
const open4 = () => {
ElNotification({
title: 'Custom Position',
message: 'I\'m at the top left corner',
position: 'top-left',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -207,6 +338,31 @@ Customize Notification's offset from the edge of the screen.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification.success({
title: 'Success',
message: 'This is a success message',
offset: 100,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@ -236,6 +392,31 @@ Customize Notification's offset from the edge of the screen.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification({
title: 'HTML String',
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>',
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@ -270,6 +451,31 @@ It is possible to hide the close button
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification.success({
title: 'Info',
message: 'This is a message without close button',
showClose: false,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::

206
website/docs/es/notification.md
View File

@ -42,6 +42,38 @@ Muestra un mensaje de notificación global en una esquina de la página.
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: 'Title',
message: h('i', { style: 'color: teal' }, 'This is a reminder')
});
};
const open2 = () => {
ElNotification({
title: 'Prompt',
message: 'This is a message that does not automatically close',
duration: 0
});
};
return {
open1,
open2,
};
},
});
</setup>
-->
```
:::
@ -110,6 +142,55 @@ Proporcionamos cuatro tipos: success, warning, info y error.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: 'Success',
message: 'This is a success message',
type: 'success',
});
};
const open2 = () => {
ElNotification({
title: 'Warning',
message: 'This is a warning message',
type: 'warning',
});
};
const open3 = () => {
ElNotification({
title: 'Info',
message: 'This is an info message',
});
};
const open4 = () => {
ElNotification({
title: 'Error',
message: 'This is an error message',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -179,6 +260,56 @@ La notificación puede surgir de cualquier rincón que uno desee.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: 'Custom Position',
message: 'I\'m at the top right corner',
});
};
const open2 = () => {
ElNotification({
title: 'Custom Position',
message: 'I\'m at the bottom right corner',
position: 'bottom-right',
});
};
const open3 = () => {
ElNotification({
title: 'Custom Position',
message: 'I\'m at the bottom left corner',
position: 'bottom-left',
});
};
const open4 = () => {
ElNotification({
title: 'Custom Position',
message: 'I\'m at the top left corner',
position: 'top-left',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -210,6 +341,31 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification.success({
title: 'Success',
message: 'This is a success message',
offset: 100,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@ -240,6 +396,31 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification({
title: 'HTML String',
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>',
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@ -277,6 +458,31 @@ Es posible ocultar el botón de cerrar
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification.success({
title: 'Info',
message: 'This is a message without close button',
showClose: false,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::

207
website/docs/fr-FR/notification.md
View File

@ -42,6 +42,39 @@ Affiche une notification globale dans un coin de la page.
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: 'Titre',
message: h('i', { style: 'color: teal' }, 'Ceci est un rappel'),
});
};
const open2 = () => {
ElNotification({
title: 'Prompt',
message: 'Ceci est un message qui ne se ferme pas',
duration: 0,
});
};
return {
open1,
open2,
};
},
});
</setup>
-->
```
:::
@ -109,6 +142,55 @@ Nous fournissons quatre types: succès, avertissement, information et erreur.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: 'Success',
message: 'Ceci est un message de succès',
type: 'success',
});
};
const open2 = () => {
ElNotification({
title: 'Warning',
message: 'Ceci est un avertissement',
type: 'warning',
});
};
const open3 = () => {
ElNotification({
title: 'Info',
message: 'Ceci est une information',
});
};
const open4 = () => {
ElNotification({
title: 'Error',
message: 'Ceci est une erreur',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -177,6 +259,56 @@ La notification peut apparaître dans le coin de votre choix.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: 'Custom Position',
message: 'Je suis dans le coin supérieur droit',
});
};
const open2 = () => {
ElNotification({
title: 'Custom Position',
message: 'Je suis dans le coin inférieur droit',
position: 'bottom-right',
});
};
const open3 = () => {
ElNotification({
title: 'Custom Position',
message: 'Je suis dans le coin inférieur gauche',
position: 'bottom-left',
});
};
const open4 = () => {
ElNotification({
title: 'Custom Position',
message: 'Je suis dans le coin supérieur gauche',
position: 'top-left',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -207,6 +339,31 @@ Vous pouvez décaler l'emplacement de la notification par rapport au bord de la
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification.success({
title: 'Success',
message: 'Ceci est un message de succès',
offset: 100,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@ -238,6 +395,31 @@ L'attribut `message` supporte le HTML.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification({
title: 'HTML String',
dangerouslyUseHTMLString: true,
message: '<strong>Ceci est du <i>HTML</i></strong>',
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@ -273,6 +455,31 @@ Il est possible de cacher le bouton de fermeture.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification.success({
title: 'Info',
message: 'Ceci est un message sans bouton de fermeture',
showClose: false,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::

206
website/docs/jp/notification.md
View File

@ -42,6 +42,38 @@
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: 'Title',
message: h('i', { style: 'color: teal' }, 'This is a reminder')
});
};
const open2 = () => {
ElNotification({
title: 'Prompt',
message: 'This is a message that does not automatically close',
duration: 0
});
};
return {
open1,
open2,
};
},
});
</setup>
-->
```
:::
@ -109,6 +141,55 @@ success, warning, info, errorの4種類を提供しています。
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: 'Success',
message: 'This is a success message',
type: 'success',
});
};
const open2 = () => {
ElNotification({
title: 'Warning',
message: 'This is a warning message',
type: 'warning',
});
};
const open3 = () => {
ElNotification({
title: 'Info',
message: 'This is an info message',
});
};
const open4 = () => {
ElNotification({
title: 'Error',
message: 'This is an error message',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -177,6 +258,56 @@ success, warning, info, errorの4種類を提供しています。
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: 'Custom Position',
message: 'I\'m at the top right corner',
});
};
const open2 = () => {
ElNotification({
title: 'Custom Position',
message: 'I\'m at the bottom right corner',
position: 'bottom-right',
});
};
const open3 = () => {
ElNotification({
title: 'Custom Position',
message: 'I\'m at the bottom left corner',
position: 'bottom-left',
});
};
const open4 = () => {
ElNotification({
title: 'Custom Position',
message: 'I\'m at the top left corner',
position: 'top-left',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -207,6 +338,31 @@ success, warning, info, errorの4種類を提供しています。
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification.success({
title: 'Success',
message: 'This is a success message',
offset: 100,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@ -236,6 +392,31 @@ success, warning, info, errorの4種類を提供しています。
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification({
title: 'HTML String',
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>',
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@ -270,6 +451,31 @@ success, warning, info, errorの4種類を提供しています。
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification.success({
title: 'Info',
message: 'This is a message without close button',
showClose: false,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::

210
website/docs/zh-CN/notification.md
View File

@ -43,6 +43,42 @@
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: '标题名称',
message: h(
'i',
{ style: 'color: teal' },
'这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案',
),
});
};
const open2 = () => {
ElNotification({
title: '提示',
message: '这是一条不会自动关闭的消息',
duration: 0,
});
};
return {
open1,
open2,
};
},
});
</setup>
-->
```
:::
@ -110,6 +146,55 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: '成功',
message: '这是一条成功的提示消息',
type: 'success',
});
};
const open2 = () => {
ElNotification({
title: '警告',
message: '这是一条警告的提示消息',
type: 'warning',
});
};
const open3 = () => {
ElNotification({
title: '消息',
message: '这是一条消息的提示消息',
});
};
const open4 = () => {
ElNotification({
title: '错误',
message: '这是一条错误的提示消息',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -178,6 +263,56 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open1 = () => {
ElNotification({
title: '自定义位置',
message: '右上角弹出的消息',
});
};
const open2 = () => {
ElNotification({
title: '自定义位置',
message: '右下角弹出的消息',
position: 'bottom-right',
});
};
const open3 = () => {
ElNotification({
title: '自定义位置',
message: '左下角弹出的消息',
position: 'bottom-left',
});
};
const open4 = () => {
ElNotification({
title: '自定义位置',
message: '左上角弹出的消息',
position: 'top-left',
});
};
return {
open1,
open2,
open3,
open4,
};
},
});
</setup>
-->
```
:::
@ -208,6 +343,31 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification({
title: '偏移',
message: '这是一条带有偏移的提示消息',
offset: 100,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@ -237,6 +397,31 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification({
title: 'HTML 片段',
dangerouslyUseHTMLString: true,
message: '<strong>这是 <i>HTML</i> 片段</strong>',
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@ -271,6 +456,31 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElNotification } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElNotification.success({
title: 'Info',
message: '这是一条没有关闭按钮的消息',
showClose: false,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::