[Doc] NoticeBar: update demo

docs/src/doc.config.js

@@ -227,7 +227,7 @@ module.exports = {
               },
               {
                 path: '/notice-bar',
-                title: 'NoticeBar 通告栏'
+                title: 'NoticeBar 通知栏'
               },
               {
                 path: '/panel',

packages/notice-bar/demo/index.vue

@@ -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: '通告栏模式',
+      mode: '通知栏模式',
-      wrapable: '文本换行',
+      wrapable: '多行展示',
-      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
+      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>

packages/notice-bar/en-US.md

@@ -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>
 ```
 

packages/notice-bar/test/__snapshots__/demo.spec.js.snap

@@ -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" style="color: rgb(25, 137, 250); background: rgb(236, 249, 255);"><i class="van-icon van-icon-info-o van-notice-bar__left-icon">
-      <div class="van-notice-bar__wrap">
+        <!----></i>
-        <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>

packages/notice-bar/zh-CN.md

@@ -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` | `''` | - |
+| mode | 通知栏模式，可选值为 `closeable` `link` | `String` | `''` | - |
-| text | 通告文本内容 | `String` | `''` | - |
+| text | 通知文本内容 | `String` | `''` | - |
 | delay | 动画延迟时间 (s) | `Number` | `1` | - |
 | speed | 滚动速率 (px/s) | `Number` | `50` | - |
 | scrollable | 是否在长度溢出时滚动播放 | `Boolean` | `true` | - |
@@ -72,13 +84,13 @@ Vue.use(NoticeBar);
 
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
-| click | 点击时触发 | - |
+| click | 点击通知栏时触发 | - |
-| close | 关闭时触发 | - |
+| close | 关闭通知栏时触发 | - |
 
 ### Slots
 
 | 名称 | 内容 |
 |------|------|
-| - | 通告文本内容 |
+| default | 通知文本内容 |
 | left-icon | 自定义左侧图标 |
 | right-icon | 自定义右侧图标 |