mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
d8b6ad7d54
* fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [new feature] add i18n support * feat: Extract demos from markdown * feat: Base components demos * [new feature] complete demo extract & translate * [fix] text cases * fix: add deepAssign test cases * fix: changelog detail * [new feature] AddressEdit support i18n
59 lines
1.5 KiB
Markdown
59 lines
1.5 KiB
Markdown
## NoticeBar
|
|
|
|
### Install
|
|
``` javascript
|
|
import { NoticeBar } from 'vant';
|
|
|
|
Vue.component(NoticeBar.name, NoticeBar);
|
|
```
|
|
|
|
### Usage
|
|
|
|
#### Basic Usage
|
|
|
|
```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."
|
|
leftIcon="https://img.yzcdn.cn/1.png"
|
|
/>
|
|
```
|
|
|
|
#### 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.
|
|
</van-notice-bar>
|
|
```
|
|
|
|
#### 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>
|
|
```
|
|
|
|
### API
|
|
|
|
| Attribute | Description | Type | Default | Accepted Values |
|
|
|-----------|-----------|-----------|-------------|-------------|
|
|
| mode | Mode | String | `''` | `closeable` `link` |
|
|
| delay | Animation delay (s) | Number | `1` | - |
|
|
| speed | Scroll speed (px) | Number | `50` | - |
|
|
| scrollable | Whether to scroll content | Boolean | `true` | - |
|
|
| leftIcon | Image url of left icon | String | - | - |
|
|
| color | Text color | String | `#f60` | - |
|
|
| background | Background color | String | `#fff7cc` | - |
|
|
|
|
|
|
### Event
|
|
|
|
| Event | Description | Attribute |
|
|
|-----------|-----------|-----------|
|
|
| click | Triggered when click notice bar | - |
|