bugfix] Toast: max width of text type (#896)

This commit is contained in:
neverland 2018-11-12 20:12:26 +08:00 committed by GitHub
parent 38cb8ca4f6
commit d4f303043d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 27 additions and 21 deletions

View File

@ -1,30 +1,30 @@
<demo-section>
<demo-block title="按钮类型" padding>
<view class="row">
<van-button type="primary" custom-class="demo-margin-right">主要按钮</van-button>
<van-button type="primary" class="demo-margin-right">主要按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</view>
<van-button custom-class="demo-margin-right">默认按钮</van-button>
<van-button class="demo-margin-right">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
</demo-block>
<demo-block title="朴素按钮" padding>
<van-button type="primary" plain custom-class="demo-margin-right">朴素按钮</van-button>
<van-button type="primary" plain class="demo-margin-right">朴素按钮</van-button>
<van-button type="danger" plain>朴素按钮</van-button>
</demo-block>
<demo-block title="禁用状态" padding>
<van-button type="primary" disabled custom-class="demo-margin-right">禁用状态</van-button>
<van-button type="primary" disabled class="demo-margin-right">禁用状态</van-button>
<van-button type="danger" disabled>禁用状态</van-button>
</demo-block>
<demo-block title="加载状态" padding>
<van-button loading type="primary" custom-class="demo-margin-right" loading-class="loading" />
<van-button loading type="primary" class="demo-margin-right" loading-class="loading" />
<van-button loading type="danger" loading-class="loading" />
</demo-block>
<demo-block title="按钮形状" padding>
<van-button type="primary" square custom-class="demo-margin-right">方形按钮</van-button>
<van-button type="primary" square class="demo-margin-right">方形按钮</van-button>
<van-button type="danger" round>圆形按钮</van-button>
</demo-block>

View File

@ -2,7 +2,7 @@
<van-button
plain
type="primary"
custom-class="demo-margin-right"
class="demo-margin-right"
bind:click="onClickAlert"
>
消息提示

View File

@ -8,7 +8,7 @@
<van-panel title="标题" desc="描述信息" status="状态" use-footer-slot>
<view class="content">内容</view>
<view slot="footer" class="footer">
<van-button size="small" custom-class="demo-margin-right">按钮</van-button>
<van-button size="small" class="demo-margin-right">按钮</van-button>
<van-button size="small" type="danger">按钮</van-button>
</view>
</van-panel>

View File

@ -10,7 +10,7 @@
</demo-block>
<demo-block title="弹出位置" padding>
<van-button bind:click="toggleBottomPopup" custom-class="demo-margin-right">底部弹出</van-button>
<van-button bind:click="toggleBottomPopup" class="demo-margin-right">底部弹出</van-button>
<van-popup
show="{{ show.bottom }}"
@ -21,7 +21,7 @@
内容
</van-popup>
<van-button bind:click="toggleTopPopup" custom-class="demo-margin-right">顶部弹出</van-button>
<van-button bind:click="toggleTopPopup" class="demo-margin-right">顶部弹出</van-button>
<van-popup
show="{{ show.top }}"
position="top"
@ -39,7 +39,7 @@
custom-class="right"
bind:close="toggleRightPopup"
>
<van-button bind:click="toggleRightPopup" custom-class="demo-margin-right">关闭弹层</van-button>
<van-button bind:click="toggleRightPopup" class="demo-margin-right">关闭弹层</van-button>
<van-button bind:click="toggleRightPopup2">右侧弹出</van-button>
<van-popup

View File

@ -3,7 +3,11 @@ import Toast from '../../dist/toast/toast';
Page({
showToast() {
Toast('我是提示文案,建议不超过十五字~');
Toast('提示内容');
},
showLongToast() {
Toast('这是一条长文字提示,超过一定字数就会换行');
},
showLoadingToast() {

View File

@ -1,5 +1,6 @@
<demo-block title="文字提示" padding>
<van-button bind:tap="showToast">文字提示</van-button>
<van-button bind:tap="showToast" class="demo-margin-right">文字提示</van-button>
<van-button bind:tap="showLongToast">长文字提示</van-button>
</demo-block>
<demo-block title="加载提示" padding>
@ -7,7 +8,7 @@
</demo-block>
<demo-block title="成功/失败提示" padding>
<van-button bind:tap="showSuccessToast" custom-class="demo-margin-right">成功提示</van-button>
<van-button bind:tap="showSuccessToast" class="demo-margin-right">成功提示</van-button>
<van-button bind:tap="showFailToast">失败提示</van-button>
</demo-block>

View File

@ -32,7 +32,6 @@ Toast.loading({
});
```
#### 成功/失败提示
```javascript
@ -40,7 +39,6 @@ Toast.success('成功文案');
Toast.fail('失败文案');
```
#### 高级用法
```javascript

View File

@ -3,9 +3,9 @@
.van-toast {
display: flex;
color: @white;
font-size: 12px;
line-height: 1.2;
border-radius: 5px;
font-size: 14px;
line-height: 20px;
border-radius: 4px;
word-break: break-all;
align-items: center;
justify-content: center;
@ -16,13 +16,16 @@
&__container {
top: 50%;
left: 50%;
max-width: 80%;
position: fixed;
// hack for avoid max-width when use left & fixed
width: fit-content;
transform: translate(-50%, -50%);
}
&--text {
padding: 12px;
min-width: 220px;
min-width: 120px;
padding: 8px 12px;
}
&--icon {