Skip to content

refactor(alert): [alert] refactor Alert's css vars #2240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 12, 2024
Merged

refactor(alert): [alert] refactor Alert's css vars #2240

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
836fcff
refactor(alert): refactor Alert's css vars
shenjunjian Oct 11, 2024
5d1295b
fix(alert): restore file
shenjunjian Oct 11, 2024
bb8d8f4
fix(alert): update docs
shenjunjian Oct 11, 2024
11054f2
fix(alert): fix comments
shenjunjian Oct 12, 2024
2d9bbb8
fix(alert): fix comments
shenjunjian Oct 12, 2024
7a024e7
fix(alert): fix e2e
shenjunjian Oct 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/sites/demos/apis/alert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ export default {
type: '',
defaultValue: '',
desc: {
'zh-CN': '组件默认插槽，当 size 设置为 large 后有效',
'zh-CN': '组件默认插槽，当 size 设置为 large 时有效，显示在 <code>description</code>下方 ',
'en-US': 'The default slot for the component is valid when size is set to large'
},
mode: ['pc', 'mobile', 'mobile-first'],
Expand All @@ -261,7 +261,7 @@ export default {
type: '',
defaultValue: '',
desc: {
'zh-CN': '提示内容',
'zh-CN': '提示内容插槽',
'en-US': 'Prompt Content'
},
mode: ['pc', 'mobile-first'],
Expand Down
24 changes: 21 additions & 3 deletions examples/sites/demos/pc/app/alert/slot-default-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,29 @@
<a href="javascript: void(0);">取消</a>
</tiny-alert>
<br />
<tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
<tiny-alert
type="success"
size="large"
description="提交结果页用于反馈一系列操作任务的处理结果。"
class="demo-alert"
>
<a href="javascript: void(0);">继续提交</a>
<a href="javascript: void(0);">取消操作</a>
</tiny-alert>
<br />
<tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
<tiny-alert
type="error"
size="large"
description="提交结果页用于反馈一系列操作任务的处理结果。"
class="demo-alert"
></tiny-alert>
<br />
<tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
<tiny-alert
type="warning"
size="large"
description="提交结果页用于反馈一系列操作任务的处理结果。"
class="demo-alert"
>
<a href="javascript: void(0);">继续提交</a>
<a href="javascript: void(0);">取消操作</a>
</tiny-alert>
Expand All @@ -31,4 +46,7 @@ import { Alert as TinyAlert } from '@opentiny/vue'
.demo-alert .tiny-alert__opration {
margin-top: 4px;
}
.demo-alert .tiny-alert__opration a {
margin-right: 16px;
}
</style>
25 changes: 22 additions & 3 deletions examples/sites/demos/pc/app/alert/slot-default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,29 @@
<a href="javascript: void(0);">取消</a>
</tiny-alert>
<br />
<tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
<tiny-alert
type="success"
size="large"
description="提交结果页用于反馈一系列操作任务的处理结果。"
class="demo-alert"
>
<a href="javascript: void(0);">继续提交</a>
<a href="javascript: void(0);">取消操作</a>
</tiny-alert>
<br />
<tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
<tiny-alert
type="error"
size="large"
description="提交结果页用于反馈一系列操作任务的处理结果。"
class="demo-alert"
></tiny-alert>
<br />
<tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
<tiny-alert
type="warning"
size="large"
description="提交结果页用于反馈一系列操作任务的处理结果。"
class="demo-alert"
>
<a href="javascript: void(0);">继续提交</a>
<a href="javascript: void(0);">取消操作</a>
</tiny-alert>
Expand All @@ -37,4 +52,8 @@ export default {
.demo-alert .tiny-alert__opration {
margin-top: 4px;
}

.demo-alert .tiny-alert__opration a {
margin-right: 16px;
}
</style>
78 changes: 54 additions & 24 deletions examples/sites/demos/pc/app/alert/webdoc/alert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default {
},
desc: {
'zh-CN':
'<p>通过 <code>description</code> 属性或者 <code>description</code> 插槽来设置提示内容，通过 <code>type</code> 设置不同的类型。</p>',
'<p>通过 <code>description</code> 属性或者 <code>description</code> 插槽来设置提示内容。<br> 通过 <code>type</code> 属性，设置不同的类型。</p>',
'en-US':
'<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>'
},
Expand All @@ -19,13 +19,28 @@ export default {
{
demoId: 'size',
name: {
'zh-CN': '尺寸',
'en-US': 'Size'
'zh-CN': '尺寸模式',
'en-US': 'Size Mode'
},
desc: {
'zh-CN': '<p>通过 <code>size</code> 设置不同的尺寸，可选值： <code>normal</code> 、<code>large</code> 。</p>',
'en-US':
'<p>Set different sizes through <code>size</code> , with optional values: <code>normal, large</code> . </p>'
'zh-CN': `
通过 <code>size</code> 设置不同的尺寸模式，可选值： <code>normal</code> 、<code>large</code> 。<br>
<div class="tip custom-block">
<p class="custom-block-title"> 尺寸模式区别 </p>
<ul>
<li> normal模式下，不会显示标题和交互操作的区域，相当于简单模式。</li>
<li> large模式下，显示全部元素，相当于完整模式。</li>
</div>
`,
'en-US': `
Use <code>size</code> to set different size modes, optional values: <code>normal</code>, <code>large</code>. <br>
<div class="tip custom-block">
<p class="custom-block-title"> Size pattern difference </p>
<ul>
<li> normal mode, the header and interactive areas are not displayed, which is equivalent to simple mode. </li>
<li> large mode, all elements are displayed, equivalent to the full mode. </li>
</div>
`
},
codeFiles: ['size.vue']
},
Expand All @@ -36,21 +51,21 @@ export default {
'en-US': 'Custom Title'
},
desc: {
'zh-CN':
'<p>当 <code>size</code> 为 <code>large</code> 时，通过 <code>title</code> 属性 或 <code>title</code> 插槽自定义标题。如不设置，默认标题根据对应的 <code>type</code> 显示。</p>',
'zh-CN': `当 <code>size</code> 为 <code>large</code> 时，通过 <code>title </code>属性 或 <code>title </code>插槽，可以自定义组件的标题。<br>
如果未自定义标题， 会根据对应的 <code>type</code> 显示相应的默认标题。`,
'en-US':
'<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>'
'<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>'
},
codeFiles: ['title.vue']
},
{
demoId: 'center',
name: {
'zh-CN': '文字居中',
'en-US': 'Center text'
'zh-CN': '内容居中',
'en-US': 'Center content'
},
desc: {
'zh-CN': '<p>通过 <code>center</code> 设置文字显示居中。</p>',
'zh-CN': '<p>通过 <code>center</code> 设置内容显示居中。</p>',
'en-US': '<p>You can use the <code>center</code> property to center the text. </p>'
},
codeFiles: ['center.vue']
Expand All @@ -59,13 +74,13 @@ export default {
demoId: 'icon',
name: {
'zh-CN': '自定义警告图标',
'en-US': 'Customized warning icon'
'en-US': 'Customized alert icon'
},
desc: {
'zh-CN':
'<p>通过 <code>icon</code> 设置自定义图标，默认会根据不同的 <code>type</code> 的值自动使用对应图标。</p>',
'通过 <code>icon </code> 属性设置自定义图标，如果未自定义图标，默认会根据不同的 <code>type</code> 的值自动使用对应图标。',
'en-US':
'<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>'
'You can use the <code>icon </code> property to set a custom icon. If no custom icon is specified, the icon is automatically used according to the <code>type</code> value.'
},
codeFiles: ['icon.vue']
},
Expand All @@ -76,9 +91,10 @@ export default {
'en-US': 'Customized Interaction'
},
desc: {
'zh-CN': '<p>当 <code>size</code> 为 <code>large</code> 时，通过默认插槽自定义交互操作。</p>',
'zh-CN':
'<p>当 <code>size</code> 为 <code>large</code> 时，通过默认插槽自定义交互操作区域，显示在 <code>description</code> 值的下方。</p>',
'en-US':
'<p>When <code>size</code> is <code>large</code> , set the default slot custom interaction operation. </p>'
'<p>When <code>size</code> is <code>large</code> , set the default slot custom interaction operation,displayed below the <code>description</code> value </p>'
},
codeFiles: ['slot-default.vue']
},
Expand All @@ -89,22 +105,36 @@ export default {
'en-US': 'Display icon'
},
desc: {
'zh-CN': '<p>通过 <code>show-icon</code> 设置左侧图标是否显示。</p>',
'en-US': '<p>Set whether the left icon is displayed by <code>show icon</code> .</p>'
'zh-CN': '通过 <code>show-icon</code> 属性，设置左侧图标是否显示。',
'en-US': 'Use the <code>show-icon</code> 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':
'<p>通过 <code>close-text</code> 设置关闭按钮文本，关闭告警后会触发 <code>close</code> 事件。<br />通过 <code>closable</code> 设置是否显示关闭按钮，没有关闭按钮，警告框将不可关闭。<br/>通过 <code>close</code> 插槽自定义关闭按钮，仅当 <code>closable</code> 为 <code>false</code> 时插槽有效，可自定义逻辑控制组件的显示、隐藏。</p>',
'en-US':
'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.'
'zh-CN': `
通过 <code>closable</code> 属性，启用内置的关闭图标，默认值为 <code>true</code>。<br />
通过 <code>close-text</code> 设置关闭按钮显示为文本，仅当<code>closable</code>为<code>true</code>时生效 。<br />
将 <code>closable</code> 设置为 <code>false</code> 时, 取消内置的关闭功能。此时可通过 <code>close</code> 插槽,完全自定义关闭按钮区域的展示。
<div class="tip custom-block">
<p class="custom-block-title"> 组件关闭或隐藏时，会有渐隐动画，详见示例！ </p>
</div>
`,
'en-US': `
Enable the built-in close icon with the <code>closable</code> property, which defaults to <code>true</code>. <br />
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 />
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.
<div class="tip custom-block">
<p class="custom-block-title">
When the component is closed or hidden, there will be a fade animation, see the example!
</p>
</div>
`
},
codeFiles: ['custom-close.vue']
},
Expand Down
Loading
Loading