mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] NoticeBar: update demo
This commit is contained in:
陈嘉涵
parent
fad00eeeab
commit
0c5d904fb3
@ -227,7 +227,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
path: '/notice-bar',
|
||||
title: 'NoticeBar 通告栏'
|
||||
title: 'NoticeBar 通知栏'
|
||||
},
|
||||
{
|
||||
path: '/panel',
|
||||
|
||||
@ -7,17 +7,6 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('mode')">
|
||||
<van-notice-bar
|
||||
mode="closeable"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
<van-notice-bar
|
||||
mode="link"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('unscrollable')">
|
||||
<van-notice-bar
|
||||
:scrollable="false"
|
||||
@ -32,6 +21,26 @@
|
||||
:text="$t('text')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('mode')">
|
||||
<van-notice-bar
|
||||
mode="closeable"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
<van-notice-bar
|
||||
mode="link"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customStyle')">
|
||||
<van-notice-bar
|
||||
:text="$t('text')"
|
||||
color="#1989fa"
|
||||
background="#ecf9ff"
|
||||
left-icon="info-o"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -40,15 +49,17 @@ export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
unscrollable: '禁用滚动',
|
||||
mode: '通告栏模式',
|
||||
wrapable: '文本换行',
|
||||
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
|
||||
mode: '通知栏模式',
|
||||
wrapable: '多行展示',
|
||||
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
|
||||
customStyle: '自定义样式'
|
||||
},
|
||||
'en-US': {
|
||||
mode: 'Mode',
|
||||
wrapable: 'Wrapable',
|
||||
unscrollable: 'Disable scroll',
|
||||
text: 'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.'
|
||||
text: 'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.',
|
||||
customStyle: 'Custom Style'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -57,7 +68,11 @@ export default {
|
||||
<style lang="less">
|
||||
.demo-notice-bar {
|
||||
.van-notice-bar:not(:first-of-type) {
|
||||
margin-top: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
padding-top: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,28 +13,16 @@ Vue.use(NoticeBar);
|
||||
|
||||
```html
|
||||
<van-notice-bar
|
||||
text="Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily."
|
||||
text="Notice Content"
|
||||
left-icon="volume-o"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Mode
|
||||
|
||||
```html
|
||||
<van-notice-bar mode="closeable">
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
</van-notice-bar>
|
||||
|
||||
<van-notice-bar mode="link">
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### Disable scroll
|
||||
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
Notice Content
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
@ -42,7 +30,31 @@ Vue.use(NoticeBar);
|
||||
|
||||
```html
|
||||
<van-notice-bar wrapable :scrollable="false">
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
Notice Content
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### Mode
|
||||
|
||||
```html
|
||||
<van-notice-bar mode="closeable">
|
||||
Notice Content
|
||||
</van-notice-bar>
|
||||
|
||||
<van-notice-bar mode="link">
|
||||
Notice Content
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### Custom Style
|
||||
|
||||
```html
|
||||
<van-notice-bar
|
||||
color="#1989fa"
|
||||
background="#ecf9ff"
|
||||
left-icon="info-o"
|
||||
>
|
||||
Notice Content
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
|
||||
@ -10,6 +10,20 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-notice-bar">
|
||||
<div class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content van-ellipsis" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-notice-bar van-notice-bar--wrapable">
|
||||
<div class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-notice-bar">
|
||||
<div class="van-notice-bar__wrap">
|
||||
@ -25,14 +39,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-notice-bar">
|
||||
<div class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content van-ellipsis" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-notice-bar van-notice-bar--wrapable">
|
||||
<div class="van-notice-bar" style="color: rgb(25, 137, 250); background: rgb(236, 249, 255);"><i class="van-icon van-icon-info-o van-notice-bar__left-icon">
|
||||
<!----></i>
|
||||
<div class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
## NoticeBar 通告栏
|
||||
## NoticeBar 通知栏
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
@ -13,44 +13,56 @@ Vue.use(NoticeBar);
|
||||
|
||||
```html
|
||||
<van-notice-bar
|
||||
text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
|
||||
text="通知内容"
|
||||
left-icon="volume-o"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 通告栏模式
|
||||
|
||||
默认模式为空，支持`closeable`和`link`。
|
||||
|
||||
```html
|
||||
<!-- closeable 模式，在右侧显示关闭按钮 -->
|
||||
<van-notice-bar mode="closeable">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
</van-notice-bar>
|
||||
|
||||
<!-- link 模式，在右侧显示链接箭头 -->
|
||||
<van-notice-bar mode="link">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### 禁用滚动
|
||||
|
||||
文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
|
||||
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
通知内容
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### 文本换行
|
||||
#### 多行展示
|
||||
|
||||
禁用滚动时，可以设置`wrapable`来开启文本换行
|
||||
禁用滚动时，可以设置`wrapable`来开启多行展示
|
||||
|
||||
```html
|
||||
<van-notice-bar wrapable :scrollable="false">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
通知内容
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### 通知栏模式
|
||||
|
||||
默认模式为空，支持`closeable`和`link`两种模式
|
||||
|
||||
```html
|
||||
<!-- closeable 模式，在右侧显示关闭按钮 -->
|
||||
<van-notice-bar mode="closeable">
|
||||
通知内容
|
||||
</van-notice-bar>
|
||||
|
||||
<!-- link 模式，在右侧显示链接箭头 -->
|
||||
<van-notice-bar mode="link">
|
||||
通知内容
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
|
||||
```html
|
||||
<van-notice-bar
|
||||
color="#1989fa"
|
||||
background="#ecf9ff"
|
||||
left-icon="info-o"
|
||||
>
|
||||
通知内容
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
@ -58,8 +70,8 @@ Vue.use(NoticeBar);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| mode | 通告栏模式，可选值为 `closeable` `link` | `String` | `''` | - |
|
||||
| text | 通告文本内容 | `String` | `''` | - |
|
||||
| mode | 通知栏模式，可选值为 `closeable` `link` | `String` | `''` | - |
|
||||
| text | 通知文本内容 | `String` | `''` | - |
|
||||
| delay | 动画延迟时间 (s) | `Number` | `1` | - |
|
||||
| speed | 滚动速率 (px/s) | `Number` | `50` | - |
|
||||
| scrollable | 是否在长度溢出时滚动播放 | `Boolean` | `true` | - |
|
||||
@ -72,13 +84,13 @@ Vue.use(NoticeBar);
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | - |
|
||||
| close | 关闭时触发 | - |
|
||||
| click | 点击通知栏时触发 | - |
|
||||
| close | 关闭通知栏时触发 | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 内容 |
|
||||
|------|------|
|
||||
| - | 通告文本内容 |
|
||||
| default | 通知文本内容 |
|
||||
| left-icon | 自定义左侧图标 |
|
||||
| right-icon | 自定义右侧图标 |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user