Skip to content

Commit bb8d8f4

Browse files
shenjunjianshenjunjian
committed
fix(alert): update docs
1 parent 5d1295b commit bb8d8f4

File tree

6 files changed

+334
-27
lines changed

6 files changed

+334
-27
lines changed

‎examples/sites/demos/apis/alert.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ export default {
248248
type: '',
249249
defaultValue: '',
250250
desc: {
251-
'zh-CN': '组件默认插槽，当 size 设置为 large 后有效',
251+
'zh-CN': '组件默认插槽，当 size 设置为 large 时有效，显示在 <code>description</code>下方 ',
252252
'en-US': 'The default slot for the component is valid when size is set to large'
253253
},
254254
mode: ['pc', 'mobile', 'mobile-first'],
@@ -261,7 +261,7 @@ export default {
261261
type: '',
262262
defaultValue: '',
263263
desc: {
264-
'zh-CN': '提示内容',
264+
'zh-CN': '提示内容插槽',
265265
'en-US': 'Prompt Content'
266266
},
267267
mode: ['pc', 'mobile-first'],

‎examples/sites/demos/pc/app/alert/slot-default-composition-api.vue

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,29 @@
99
<a href="javascript: void(0);">取消</a>
1010
</tiny-alert>
1111
<br />
12-
<tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
12+
<tiny-alert
13+
type="success"
14+
size="large"
15+
description="提交结果页用于反馈一系列操作任务的处理结果。"
16+
class="demo-alert"
17+
>
1318
<a href="javascript: void(0);">继续提交</a>
1419
<a href="javascript: void(0);">取消操作</a>
1520
</tiny-alert>
1621
<br />
17-
<tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
22+
<tiny-alert
23+
type="error"
24+
size="large"
25+
description="提交结果页用于反馈一系列操作任务的处理结果。"
26+
class="demo-alert"
27+
></tiny-alert>
1828
<br />
19-
<tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
29+
<tiny-alert
30+
type="warning"
31+
size="large"
32+
description="提交结果页用于反馈一系列操作任务的处理结果。"
33+
class="demo-alert"
34+
>
2035
<a href="javascript: void(0);">继续提交</a>
2136
<a href="javascript: void(0);">取消操作</a>
2237
</tiny-alert>
@@ -31,4 +46,7 @@ import { Alert as TinyAlert } from '@opentiny/vue'
3146
.demo-alert .tiny-alert__opration {
3247
margin-top: 4px;
3348
}
49+
.demo-alert .tiny-alert__opration a {
50+
margin-right: 16px;
51+
}
3452
</style>

‎examples/sites/demos/pc/app/alert/slot-default.vue

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,29 @@
99
<a href="javascript: void(0);">取消</a>
1010
</tiny-alert>
1111
<br />
12-
<tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
12+
<tiny-alert
13+
type="success"
14+
size="large"
15+
description="提交结果页用于反馈一系列操作任务的处理结果。"
16+
class="demo-alert"
17+
>
1318
<a href="javascript: void(0);">继续提交</a>
1419
<a href="javascript: void(0);">取消操作</a>
1520
</tiny-alert>
1621
<br />
17-
<tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
22+
<tiny-alert
23+
type="error"
24+
size="large"
25+
description="提交结果页用于反馈一系列操作任务的处理结果。"
26+
class="demo-alert"
27+
></tiny-alert>
1828
<br />
19-
<tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
29+
<tiny-alert
30+
type="warning"
31+
size="large"
32+
description="提交结果页用于反馈一系列操作任务的处理结果。"
33+
class="demo-alert"
34+
>
2035
<a href="javascript: void(0);">继续提交</a>
2136
<a href="javascript: void(0);">取消操作</a>
2237
</tiny-alert>
@@ -37,4 +52,8 @@ export default {
3752
.demo-alert .tiny-alert__opration {
3853
margin-top: 4px;
3954
}
55+
56+
.demo-alert .tiny-alert__opration a {
57+
margin-right: 16px;
58+
}
4059
</style>

‎examples/sites/demos/pc/app/alert/webdoc/alert.js

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default {
1010
},
1111
desc: {
1212
'zh-CN':
13-
'<p>通过 <code>description</code> 属性或者 <code>description</code> 插槽来设置提示内容，通过 <code>type</code> 设置不同的类型。</p>',
13+
'<p>通过 <code>description</code> 属性或者 <code>description</code> 插槽来设置提示内容。<br> 通过 <code>type</code> 属性，设置不同的类型。</p>',
1414
'en-US':
1515
'<p>Set the prompt content through the <code>description</code> attribute or <code>description</code> slot, and set different types through <code>type</code> . </p>'
1616
},
@@ -19,13 +19,28 @@ export default {
1919
{
2020
demoId: 'size',
2121
name: {
22-
'zh-CN': '尺寸',
23-
'en-US': 'Size'
22+
'zh-CN': '尺寸模式',
23+
'en-US': 'Size Mode'
2424
},
2525
desc: {
26-
'zh-CN': '<p>通过 <code>size</code> 设置不同的尺寸，可选值： <code>normal</code> 、<code>large</code> 。</p>',
27-
'en-US':
28-
'<p>Set different sizes through <code>size</code> , with optional values: <code>normal, large</code> . </p>'
26+
'zh-CN': `
27+
通过 <code>size</code> 设置不同的尺寸模式，可选值： <code>normal</code> 、<code>large</code> 。<br>
28+
<div class="tip custom-block">
29+
<p class="custom-block-title"> 尺寸模式区别 </p>
30+
<ul>
31+
<li> normal模式下，不会显示标题和交互操作的区域，相当于简单模式。</li>
32+
<li> large模式下，显示全部元素，相当于完整模式。</li>
33+
</div>
34+
`,
35+
'en-US': `
36+
Use <code>size</code> to set different size modes, optional values: <code>normal</code>, <code>large</code>. <br>
37+
<div class="tip custom-block">
38+
<p class="custom-block-title"> Size pattern difference </p>
39+
<ul>
40+
<li> normal mode, the header and interactive areas are not displayed, which is equivalent to simple mode. </li>
41+
<li> large mode, all elements are displayed, equivalent to the full mode. </li>
42+
</div>
43+
`
2944
},
3045
codeFiles: ['size.vue']
3146
},
@@ -36,10 +51,10 @@ export default {
3651
'en-US': 'Custom Title'
3752
},
3853
desc: {
39-
'zh-CN':
40-
'<p>当 <code>size</code> 为 <code>large</code> 时，通过 <code>title</code> 属性 或 <code>title</code> 插槽自定义标题。如不设置，默认标题根据对应的 <code>type</code> 显示。</p>',
54+
'zh-CN': `当 <code>size</code> 为 <code>large</code> 时，通过 <code>title </code>属性 或 <code>title </code>插槽，可以自定义组件的标题。<br>
55+
如果未自定义标题， 会根据对应的 <code>type</code> 显示相应的默认标题。`,
4156
'en-US':
42-
'<p>When <code>size</code> is set to large, the title is displayed. You can set <code>title</code> or <code>slot</code> to customize the title. The default title is displayed according to the set <code>type</code> . </p>'
57+
'<p>When <code>size</code> is set to large, the title is displayed. You can set <code>title</code> or <code>slot</code> to customize the title. <br>The default title is displayed according to the set <code>type</code> . </p>'
4358
},
4459
codeFiles: ['title.vue']
4560
},
@@ -50,7 +65,7 @@ export default {
5065
'en-US': 'Center text'
5166
},
5267
desc: {
53-
'zh-CN': '<p>通过 <code>center</code> 设置文字显示居中。</p>',
68+
'zh-CN': '<p>通过 <code>center</code> 设置内容显示居中。</p>',
5469
'en-US': '<p>You can use the <code>center</code> property to center the text. </p>'
5570
},
5671
codeFiles: ['center.vue']
@@ -63,7 +78,7 @@ export default {
6378
},
6479
desc: {
6580
'zh-CN':
66-
'<p>通过 <code>icon</code> 设置自定义图标，默认会根据不同的 <code>type</code> 的值自动使用对应图标。</p>',
81+
'<p>通过 <code>icon </code> 属性设置自定义图标，如果未自定义图标，默认会根据不同的 <code>type</code> 的值自动使用对应图标。</p>',
6782
'en-US':
6883
'<p>By setting custom icons through <code>icon</code> , the corresponding icons will be automatically used by default based on different <code>type</code> values.</p>'
6984
},
@@ -76,9 +91,10 @@ export default {
7691
'en-US': 'Customized Interaction'
7792
},
7893
desc: {
79-
'zh-CN': '<p>当 <code>size</code> 为 <code>large</code> 时，通过默认插槽自定义交互操作。</p>',
94+
'zh-CN':
95+
'<p>当 <code>size</code> 为 <code>large</code> 时，通过默认插槽自定义交互操作区域，显示在 <code>description</code> 值的下方。</p>',
8096
'en-US':
81-
'<p>When <code>size</code> is <code>large</code> , set the default slot custom interaction operation. </p>'
97+
'<p>When <code>size</code> is <code>large</code> , set the default slot custom interaction operation,displayed below the <code>description</code> value </p>'
8298
},
8399
codeFiles: ['slot-default.vue']
84100
},
@@ -89,7 +105,7 @@ export default {
89105
'en-US': 'Display icon'
90106
},
91107
desc: {
92-
'zh-CN': '<p>通过 <code>show-icon</code> 设置左侧图标是否显示。</p>',
108+
'zh-CN': '<p>通过 <code>show-icon</code> 属性，设置左侧图标是否显示。</p>',
93109
'en-US': '<p>Set whether the left icon is displayed by <code>show icon</code> .</p>'
94110
},
95111
codeFiles: ['show-icon.vue']
@@ -101,10 +117,19 @@ export default {
101117
'en-US': 'custom close button'
102118
},
103119
desc: {
104-
'zh-CN':
105-
'<p>通过 <code>close-text</code> 设置关闭按钮文本，关闭告警后会触发 <code>close</code> 事件。<br />通过 <code>closable</code> 设置是否显示关闭按钮，没有关闭按钮，警告框将不可关闭。<br/>通过 <code>close</code> 插槽自定义关闭按钮，仅当 <code>closable</code> 为 <code>false</code> 时插槽有效，可自定义逻辑控制组件的显示、隐藏。</p>',
106-
'en-US':
107-
'Set the close button text through <code>close text</code> < Br/>Set whether to display the close button through <code>close</code> . If there is no close button, the warning box will not be able to be closed< By customizing the close button through the <code>close</code> slot, the slot is only valid when the <code>close</code> is <code>false</code> , and the display and hiding of logic control components can be customized.'
120+
'zh-CN': `
121+
通过 <code>closable</code> 属性，启用内置的关闭图标，默认值为 <code>true</code>。<br />
122+
通过 <code>close-text</code> 设置关闭按钮显示为文本，仅当<code>closable</code>为<code>true</code>时生效 。<br />
123+
将 <code>closable</code> 设置为 <code>false</code> 时, 取消内置的关闭功能。此时可通过 <code>close</code> 插槽,完全自定义关闭按钮区域的展示。
124+
<div class="tip custom-block">
125+
<p class="custom-block-title"> 组件关闭或隐藏时，会有渐隐动画，详见示例！ </p>
126+
</div>
127+
`,
128+
'en-US': `
129+
Enable the built-in close icon with the <code>closable</code> property, which defaults to <code>true</code>. <br />
130+
Set the close button text by <code>close-text</code> instead of the close icon, effective only if <code>closable</code> is <code>true</code>. <br />
131+
Unblock the built-in closing function when <code>closable</code> is set to <code>false</code>. At this point, you can completely customize the presentation of the close button area via the <code>close</code> slot.
132+
`
108133
},
109134
codeFiles: ['custom-close.vue']
110135
},

‎packages/theme/src/alert/vars.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
// 警告的Normal时，水平内边距
8383
--tv-Alert-padding-y-normal: 9px;
8484
// 警告的Normal时,水平外边距
85-
--tv-Alert-margin-x-normal: var(--tv-space-xl);
85+
--tv-Alert-margin-x-normal: 0;
8686
// 警告的Normal时,水平外边距
8787
--tv-Alert-margin-y-normal: var(--tv-space-xl);
8888

0 commit comments

Comments
 (0)