feat(notice-bar): support direction attr

Tencent · Dec 1, 2022 · da66611 · da66611
1 parent 2bed2a0
commit da66611
Show file tree

Hide file tree

Showing 16 changed files with 239 additions and 97 deletions.
diff --git a/src/notice-bar/README.en-US.md b/src/notice-bar/README.en-US.md
@@ -5,13 +5,16 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-content | String / Slot | - | \- | N
+content | String / Array / Slot | - | \- | N
 custom-style `v0.25.0` | String | - | \- | N
+direction | String | horizontal | options：horizontal/vertical | N
 external-classes | Array | - | `['t-class', 't-class-content', 't-class-prefix-icon', 't-class-extra', 't-class-suffix-icon']` | N
 extra | String / Slot | - | \- | N
 marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
 prefix-icon | String | - | \- | N
+prefix-icon-props | Object | {} | \- | N
 suffix-icon | String | - | \- | N
+suffix-icon-props | Object | {} | \- | N
 theme | String | info | options：info/success/warning/error | N
 visible | Boolean | false | \- | N
 default-visible | Boolean | false | uncontrolled property | N

diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md
@@ -18,47 +18,56 @@ isComponent: true
 
 ## 代码演示
 
-### 基础静态公告栏
+### 组件类型
+
+纯文字的公告栏
 
 {{ base }}
 
-### 带图标静态公告栏
+带图标的公告栏
 
 {{ iconDemo }}
 
-### 带操作公告栏
+带操作的公告栏
 
 {{ event }}
 
-### 滚动公告栏
+自定义样式的公告栏
 
-{{ scrolling }}
+{{ custom }}
 
-### 自定义样式
+自定义内容的公告栏
 
-{{ custom }}
+{{ customization }}
+
+### 组件状态
 
-### 不同状态的公告栏
 公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）
 
 {{ theme }}
 
-### 多行文字消息栏
+### 可滚动公告栏
+
+可滚动公告栏有水平（horizontal）和垂直（vertical）
+
+{{ scrolling }}
 
-{{ customization }}
 
 ## API
 ### NoticeBar Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-content | String / Slot | - | 文本内容 | N
+content | String / Array / Slot | - | 文本内容 | N
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
+direction | String | horizontal | 滚动方向，可选 horizontal、vertical。可选项：horizontal/vertical | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。。`['t-class', 't-class-content', 't-class-prefix-icon', 't-class-extra', 't-class-suffix-icon']` | N
 extra | String / Slot | - | 右侧额外信息 | N
-marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
 prefix-icon | String | - | 前缀图标 | N
+prefix-icon-props | Object | {} | 透传至组件前置图标 `prefix-icon` | N
 suffix-icon | String | - | 后缀图标 | N
+suffix-icon-props | Object | {} | 透传至组件后缀图标 `suffix-icon` | N
 theme | String | info | 内置主题。可选项：info/success/warning/error | N
 visible | Boolean | false | 显示/隐藏 | N
 default-visible | Boolean | false | 显示/隐藏。非受控属性 | N

diff --git a/src/notice-bar/__test__/__snapshots__/demo.test.js.snap b/src/notice-bar/__test__/__snapshots__/demo.test.js.snap
@@ -3,7 +3,7 @@
 exports[`NoticeBar NoticeBar base demo works fine 1`] = `
 <base>
   <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述"
+    content="这是一条普通的通知信息"
     prefixIcon="null"
     visible="{{true}}"
   />
@@ -15,28 +15,16 @@ exports[`NoticeBar NoticeBar custom demo works fine 1`] = `
   <t-notice-bar
     content="提示文字描述提示文字描述提示文字描述"
     prefixIcon="sound"
+    suffixIcon="chevron-right"
     tClass="external-class"
+    tClassPrefixIcon="external-class-prefix-icon"
     visible="{{true}}"
   />
 </custom>
 `;
 
 exports[`NoticeBar NoticeBar customization demo works fine 1`] = `
 <customization>
-  <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-    prefixIcon="null"
-    visible="{{true}}"
-  />
-  <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-    visible="{{true}}"
-  />
-  <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-    suffixIcon="chevron-right"
-    visible="{{true}}"
-  />
   <t-notice-bar
     visible="{{true}}"
   >
@@ -58,6 +46,7 @@ exports[`NoticeBar NoticeBar customization demo works fine 1`] = `
     >
       <t-icon
         name="close"
+        size="44rpx"
       />
     </wx-view>
   </t-notice-bar>
@@ -67,11 +56,33 @@ exports[`NoticeBar NoticeBar customization demo works fine 1`] = `
 exports[`NoticeBar NoticeBar event demo works fine 1`] = `
 <event>
   <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述"
+    content="这是一条普通的通知信息"
+    suffixIcon="close"
+    visible="{{true}}"
+    bind:click="click"
+  />
+  <t-notice-bar
+    content="这是一条普通的通知信息"
     suffixIcon="chevron-right"
     visible="{{true}}"
     bind:click="click"
   />
+  <t-notice-bar
+    visible="{{true}}"
+    bind:click="click"
+  >
+    <wx-view
+      slot="content"
+    >
+       这是一条普通的通知信息 
+    </wx-view>
+    <wx-view
+      class="extra"
+      slot="extra"
+    >
+      文字按钮
+    </wx-view>
+  </t-notice-bar>
   <t-notice-bar
     suffixIcon="close"
     visible="{{true}}"
@@ -80,7 +91,7 @@ exports[`NoticeBar NoticeBar event demo works fine 1`] = `
     <wx-view
       slot="content"
     >
-       提示文字描述提示文字描述 
+       这是一条普通的通知信息 
     </wx-view>
     <wx-view
       class="extra"
@@ -134,6 +145,21 @@ exports[`NoticeBar NoticeBar scrolling demo works fine 1`] = `
     }}"
     visible="{{true}}"
   />
+  <t-notice-bar
+    content="{{
+      Array [
+        "君不见",
+        "高堂明镜悲白发",
+        "朝如青丝暮成雪",
+        "人生得意须尽欢",
+        "莫使金樽空对月",
+      ]
+    }}"
+    direction="vertical"
+    prefixIcon="sound"
+    visible="{{true}}"
+    bind:click="click"
+  />
 </scrolling>
 `;
 

diff --git a/src/notice-bar/_example/base/index.wxml b/src/notice-bar/_example/base/index.wxml
@@ -1 +1 @@
-<t-notice-bar visible="{{true}}" prefixIcon="null" content="提示文字描述提示文字描述提示文字描述"></t-notice-bar>
+<t-notice-bar visible="{{true}}" prefixIcon="null" content="这是一条普通的通知信息"></t-notice-bar>
diff --git a/src/notice-bar/_example/custom/index.wxml b/src/notice-bar/_example/custom/index.wxml
@@ -1,6 +1,8 @@
 <t-notice-bar
   visible="{{true}}"
   prefixIcon="sound"
+  suffixIcon="chevron-right"
   content="提示文字描述提示文字描述提示文字描述"
   t-class="external-class"
+  t-class-prefix-icon="external-class-prefix-icon"
 ></t-notice-bar>
diff --git a/src/notice-bar/_example/custom/index.wxss b/src/notice-bar/_example/custom/index.wxss
@@ -1,4 +1,8 @@
 .external-class {
-  color: #ffffff !important;
-  background-color: #a6a6a6 !important;
+  opacity: 1 !important;
+  background: rgba(243, 243, 243, 1) !important;
+}
+
+.external-class-prefix-icon {
+  color: rgba(0, 0, 0, 0.9) !important;
 }
diff --git a/src/notice-bar/_example/customization/index.wxml b/src/notice-bar/_example/customization/index.wxml
@@ -1,27 +1,10 @@
-<t-notice-bar
-  visible="{{true}}"
-  prefixIcon="null"
-  content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-></t-notice-bar>
-
-<t-notice-bar
-  visible="{{true}}"
-  content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-></t-notice-bar>
-
-<t-notice-bar
-  visible="{{true}}"
-  suffixIcon="chevron-right"
-  content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-></t-notice-bar>
-
 <!-- slot实现自定义content内容 -->
 <t-notice-bar visible="{{true}}">
   <view slot="content">
     提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
     <view class="extra" bind:tap="clickDetail"> 详情 </view>
   </view>
   <view slot="suffixIcon">
-    <t-icon name="close"></t-icon>
+    <t-icon name="close" size="44rpx"></t-icon>
   </view>
 </t-notice-bar>
diff --git a/src/notice-bar/_example/customization/index.wxss b/src/notice-bar/_example/customization/index.wxss
@@ -1,5 +1,6 @@
 .extra {
-  display: inline-block !important;
-  font-weight: 700 !important;
-  border-bottom: 2rpx solid !important;
+  display: inline-block;
+  font-weight: 700;
+  border-bottom: 2rpx solid;
+  color: #0052d9;
 }
diff --git a/src/notice-bar/_example/event/index.wxml b/src/notice-bar/_example/event/index.wxml
@@ -1,11 +1,23 @@
+<t-notice-bar
+  visible="{{visible}}"
+  suffixIcon="close"
+  content="这是一条普通的通知信息"
+  bind:click="click"
+></t-notice-bar>
+
 <t-notice-bar
   visible="{{visible}}"
   suffixIcon="chevron-right"
-  content="提示文字描述提示文字描述提示文字描述"
+  content="这是一条普通的通知信息"
   bind:click="click"
 ></t-notice-bar>
 
+<t-notice-bar visible="{{visible}}" bind:click="click">
+  <view slot="content"> 这是一条普通的通知信息 </view>
+  <view slot="extra" class="extra">文字按钮</view>
+</t-notice-bar>
+
 <t-notice-bar visible="{{visible}}" suffixIcon="close" bind:click="click">
-  <view slot="content"> 提示文字描述提示文字描述 </view>
+  <view slot="content"> 这是一条普通的通知信息 </view>
   <view slot="extra" class="extra">详情</view>
 </t-notice-bar>
diff --git a/src/notice-bar/_example/notice-bar.wxml b/src/notice-bar/_example/notice-bar.wxml
@@ -1,39 +1,41 @@
 <view class="demo">
   <view class="demo-title">NoticeBar 公告栏</view>
-  <view class="demo-desc"> 在导航栏下方，用于给用户显示提示消息 </view>
-  <t-demo title="01 类型" desc="基础静态公告栏">
+  <view class="demo-desc"> 在导航栏下方，用于给用户显示提示消息。 </view>
+  <t-demo title="组件类型">
+    <view class="demo-section__desc">纯文字的公告栏</view>
     <view class="box">
       <base />
     </view>
 
-    <view class="demo-section__desc">带图标静态公告栏</view>
+    <view class="demo-section__desc">带图标的公告栏</view>
     <view class="box">
       <iconDemo />
     </view>
 
-    <view class="demo-section__desc">带操作公告栏</view>
+    <view class="demo-section__desc">带操作的公告栏</view>
     <view class="box">
       <event />
     </view>
 
-    <view class="demo-section__desc">滚动公告栏</view>
+    <view class="demo-section__desc">自定义样式的公告栏</view>
     <view class="box">
-      <scrolling />
+      <custom />
     </view>
 
-    <view class="demo-section__desc">自定义样式</view>
+    <view class="demo-section__desc">自定义内容的公告栏</view>
     <view class="box">
-      <custom />
+      <customization />
     </view>
   </t-demo>
-  <t-demo title="02 状态" desc="多行文字消息栏">
+  <t-demo title="组件状态" desc="公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）">
     <view class="box">
       <theme />
     </view>
+  </t-demo>
 
-    <view class="demo-section__desc">自定义样式</view>
+  <t-demo title="03 可滚动公告栏" desc="可滚动公告栏有水平（horizontal）和垂直（vertical）">
     <view class="box">
-      <customization />
+      <scrolling />
     </view>
   </t-demo>
 </view>
diff --git a/src/notice-bar/_example/scrolling/index.js b/src/notice-bar/_example/scrolling/index.js
@@ -11,5 +11,6 @@ Component({
       loop: -1,
       delay: 0,
     },
+    content: ['君不见', '高堂明镜悲白发', '朝如青丝暮成雪', '人生得意须尽欢', '莫使金樽空对月'],
   },
 });
diff --git a/src/notice-bar/_example/scrolling/index.wxml b/src/notice-bar/_example/scrolling/index.wxml
@@ -10,3 +10,11 @@
   marquee="{{marquee2}}"
   content="提示文字描述提示文字描述提示文字描述提示文字描述文"
 ></t-notice-bar>
+
+<t-notice-bar
+  visible="{{true}}"
+  direction="vertical"
+  content="{{content}}"
+  prefixIcon="sound"
+  bind:click="click"
+></t-notice-bar>