+
继续提交
取消操作
@@ -37,4 +52,8 @@ export default {
.demo-alert .tiny-alert__opration {
margin-top: 4px;
}
+
+.demo-alert .tiny-alert__opration a {
+ margin-right: 16px;
+}
diff --git a/examples/sites/demos/pc/app/alert/webdoc/alert.js b/examples/sites/demos/pc/app/alert/webdoc/alert.js
index 7bb400b0c1..d240b13973 100644
--- a/examples/sites/demos/pc/app/alert/webdoc/alert.js
+++ b/examples/sites/demos/pc/app/alert/webdoc/alert.js
@@ -10,7 +10,7 @@ export default {
},
desc: {
'zh-CN':
- '通过 description 属性或者 description 插槽来设置提示内容，通过 type 设置不同的类型。
',
+ '通过 description 属性或者 description 插槽来设置提示内容。
通过 type 属性，设置不同的类型。
',
'en-US':
'Set the prompt content through the description attribute or description slot, and set different types through type .
'
},
@@ -19,13 +19,28 @@ export default {
{
demoId: 'size',
name: {
- 'zh-CN': '尺寸',
- 'en-US': 'Size'
+ 'zh-CN': '尺寸模式',
+ 'en-US': 'Size Mode'
},
desc: {
- 'zh-CN': '通过 size 设置不同的尺寸，可选值： normal 、large 。
',
- 'en-US':
- 'Set different sizes through size , with optional values: normal, large .
'
+ 'zh-CN': `
+ 通过 size 设置不同的尺寸模式，可选值： normal 、large 。
+
+
尺寸模式区别
+
+ - normal模式下，不会显示标题和交互操作的区域，相当于简单模式。
+ - large模式下，显示全部元素，相当于完整模式。
+
size to set different size modes, optional values: normal, large.
+
+
Size pattern difference
+
+ - normal mode, the header and interactive areas are not displayed, which is equivalent to simple mode.
+ - large mode, all elements are displayed, equivalent to the full mode.
+
当 size 为 large 时，通过 title 属性 或 title 插槽自定义标题。如不设置，默认标题根据对应的 type 显示。
',
+ 'zh-CN': `当 size 为 large 时，通过 title 属性 或 title 插槽，可以自定义组件的标题。
+ 如果未自定义标题， 会根据对应的 type 显示相应的默认标题。`,
'en-US':
- 'When size is set to large, the title is displayed. You can set title or slot to customize the title. The default title is displayed according to the set type .
'
+ 'When size is set to large, the title is displayed. You can set title or slot to customize the title.
The default title is displayed according to the set type .
'
},
codeFiles: ['title.vue']
},
{
demoId: 'center',
name: {
- 'zh-CN': '文字居中',
- 'en-US': 'Center text'
+ 'zh-CN': '内容居中',
+ 'en-US': 'Center content'
},
desc: {
- 'zh-CN': '通过 center 设置文字显示居中。
',
+ 'zh-CN': '通过 center 设置内容显示居中。
',
'en-US': 'You can use the center property to center the text.
'
},
codeFiles: ['center.vue']
@@ -59,13 +74,13 @@ export default {
demoId: 'icon',
name: {
'zh-CN': '自定义警告图标',
- 'en-US': 'Customized warning icon'
+ 'en-US': 'Customized alert icon'
},
desc: {
'zh-CN':
- '通过 icon 设置自定义图标，默认会根据不同的 type 的值自动使用对应图标。
',
+ '通过 icon 属性设置自定义图标，如果未自定义图标，默认会根据不同的 type 的值自动使用对应图标。',
'en-US':
- 'By setting custom icons through icon , the corresponding icons will be automatically used by default based on different type values.
'
+ 'You can use the icon property to set a custom icon. If no custom icon is specified, the icon is automatically used according to the type value.'
},
codeFiles: ['icon.vue']
},
@@ -76,9 +91,10 @@ export default {
'en-US': 'Customized Interaction'
},
desc: {
- 'zh-CN': '当 size 为 large 时，通过默认插槽自定义交互操作。
',
+ 'zh-CN':
+ '当 size 为 large 时，通过默认插槽自定义交互操作区域，显示在 description 值的下方。
',
'en-US':
- 'When size is large , set the default slot custom interaction operation.
'
+ 'When size is large , set the default slot custom interaction operation,displayed below the description value
'
},
codeFiles: ['slot-default.vue']
},
@@ -89,22 +105,36 @@ export default {
'en-US': 'Display icon'
},
desc: {
- 'zh-CN': '通过 show-icon 设置左侧图标是否显示。
',
- 'en-US': 'Set whether the left icon is displayed by show icon .
'
+ 'zh-CN': '通过 show-icon 属性，设置左侧图标是否显示。',
+ 'en-US': 'Use the show-icon property to set whether the icon on the left is displayed.'
},
codeFiles: ['show-icon.vue']
},
{
demoId: 'custom-close',
name: {
- 'zh-CN': '关闭按钮',
+ 'zh-CN': '自定义关闭按钮',
'en-US': 'custom close button'
},
desc: {
- 'zh-CN':
- '通过 close-text 设置关闭按钮文本，关闭告警后会触发 close 事件。
通过 closable 设置是否显示关闭按钮，没有关闭按钮，警告框将不可关闭。
通过 close 插槽自定义关闭按钮，仅当 closable 为 false 时插槽有效，可自定义逻辑控制组件的显示、隐藏。
',
- 'en-US':
- 'Set the close button text through close text < Br/>Set whether to display the close button through close . If there is no close button, the warning box will not be able to be closed< By customizing the close button through the close slot, the slot is only valid when the close is false , and the display and hiding of logic control components can be customized.'
+ 'zh-CN': `
+ 通过 closable 属性，启用内置的关闭图标，默认值为 true。
+ 通过 close-text 设置关闭按钮显示为文本，仅当closable为true时生效 。
+ 将 closable 设置为 false 时, 取消内置的关闭功能。此时可通过 close 插槽,完全自定义关闭按钮区域的展示。
+
+
组件关闭或隐藏时，会有渐隐动画，详见示例！
+
closable property, which defaults to true.
+ Set the close button text by close-text instead of the close icon, effective only if closable is true.
+ Unblock the built-in closing function when closable is set to false. At this point, you can completely customize the presentation of the close button area via the close slot.
+
+
+ When the component is closed or hidden, there will be a fade animation, see the example!
+
+