Skip to content
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.

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

toast supports line wrap #852

Merged
merged 2 commits into from
May 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion components/toast/README.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ Dynamically create a toast
|----|-----|------|------|------|
| icon | name of icon | String | - | refer to `Icon` component for customized icons|
| iconSvg | use svg icon | Boolean | `false` |-|
| content | content of message| String/Number | - |- |
| content | content of message| String/Number | - | content supports two lines display <sup class="version-after">2.7.1+</sup> |
| duration | toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `3000` | - |
| position | display position | String | `center` | `top/center/bottom` |
| hasMask | whether to show a transparent mask, which will prevent users from clicking| Boolean | `false` | - |
Expand Down
2 changes: 1 addition & 1 deletion components/toast/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Vue.component(Toast.component.name, Toast.component) // 组件引入
|----|-----|------|------|------|
| icon | Icon组件图标名称 | String | - |如需自定义图标, 请查看`Icon`组件 |
| iconSvg | 使用svg图标 | Boolean | `false` |-|
| content | 提示内容文本 | String | - |- |
| content | 提示内容文本 | String | - |内容支持2行展示 <sup class="version-after">2.7.1+</sup>|
| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | - |
| position | 展示位置 | String | `center` | `top/center/bottom` |
| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - |
Expand Down
11 changes: 7 additions & 4 deletions components/toast/toast.vue
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export default {

.md-toast-content
display inline-flex
align-items center
align-items flex-start
max-width 100%
min-width 80px
padding toast-padding
Expand All @@ -145,12 +145,15 @@ export default {
box-sizing border-box
overflow hidden
.md-toast-text
white-space nowrap
text-overflow: ellipsis
overflow hidden
word-break break-all
white-space normal
display -webkit-box
-webkit-box-orient vertical
-webkit-line-clamp 2
&.square
display flex
flex-direction column
align-items center
width 240px
min-height 232px
padding 54px 36px 48px 36px
Expand Down
Loading