feat(notice-bar): support direction attr

Tencent · Nov 16, 2022 · b396f72 · b396f72
1 parent e3a4cae
commit b396f72
Show file tree

Hide file tree

Showing 16 changed files with 171 additions and 71 deletions.
diff --git a/src/notice-bar/README.en-US.md b/src/notice-bar/README.en-US.md
@@ -5,8 +5,9 @@
 
 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

diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md
@@ -16,6 +16,20 @@ isComponent: true
 }
 ```
 
+### 主题定制
+
+CSS 变量名|说明
+--|--
+--td-notice-bar-font-color | 通知栏文本颜色
+--td-notice-bar-info-color | 'info' 主题背景颜色
+--td-notice-bar-info-bg-color | 'info' 主题前缀图标颜色
+--td-notice-bar-success-color | 'success' 主题前缀图标颜色
+--td-notice-bar-success-bg-color | 'success' 主题背景颜色
+--td-notice-bar-warning-color | 'warning' 主题前缀图标颜色
+--td-notice-bar-warning-bg-color | 'warning' 主题背景颜色
+--td-notice-bar-error-color | 'error' 主题前缀图标颜色
+--td-notice-bar-error-bg-color | 'error' 主题背景颜色
+
 ## 代码演示
 
 ### 基础静态公告栏
@@ -52,11 +66,12 @@ isComponent: true
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-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
 suffix-icon | String | - | 后缀图标 | N
 theme | String | info | 内置主题。可选项：info/success/warning/error | 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}}"
   >
@@ -67,11 +55,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 +90,7 @@ exports[`NoticeBar NoticeBar event demo works fine 1`] = `
     <wx-view
       slot="content"
     >
-       提示文字描述提示文字描述 
+       这是一条普通的通知信息 
     </wx-view>
     <wx-view
       class="extra"
@@ -134,6 +144,20 @@ 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);
 }
diff --git a/src/notice-bar/_example/customization/index.wxml b/src/notice-bar/_example/customization/index.wxml
@@ -1,20 +1,3 @@
-<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">

diff --git a/src/notice-bar/_example/customization/index.wxss b/src/notice-bar/_example/customization/index.wxss
@@ -2,4 +2,5 @@
   display: inline-block !important;
   font-weight: 700 !important;
   border-bottom: 2rpx solid !important;
+  color: #0052d9 !important;
 }
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="01 组件类型">
+    <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="02 组件状态" desc="普通/成功/警示/错误">
     <view class="box">
       <theme />
     </view>
+  </t-demo>
 
-    <view class="demo-section__desc">自定义样式</view>
+  <t-demo title="03 可滚动公告栏" desc="水平/垂直">
     <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,6 @@
   marquee="{{marquee2}}"
   content="提示文字描述提示文字描述提示文字描述提示文字描述文"
 ></t-notice-bar>
+
+<t-notice-bar visible="{{true}}" direction="vertical" content="{{content}}" prefixIcon="sound" bind:click="click">
+</t-notice-bar>
diff --git a/src/notice-bar/notice-bar.less b/src/notice-bar/notice-bar.less
@@ -1,20 +1,20 @@
 @import '../common/style/index.less';
 
-@notice-bar-height: 92rpx;
 @notice-bar-font-size: 28rpx;
 @notice-bar-horizen-padding: 32rpx;
-@notice-bar-vertical-padding: 24rpx;
+@notice-bar-vertical-padding: 26rpx;
 @notice-bar-line-height: 44rpx;
 @notice-bar-icon-size: 44rpx;
 
 // color
-@notice-bar-info-background-color: #ecf2fe;
+@notice-bar-font-color: #000;
+@notice-bar-info-bg-color: #ecf2fe;
 @notice-bar-info-color: #0052d9;
-@notice-bar-success-background-color: #e8f8f2;
+@notice-bar-success-bg-color: #e8f8f2;
 @notice-bar-success-color: #00a870;
-@notice-bar-warning-background-color: #fef3e6;
+@notice-bar-warning-bg-color: #fef3e6;
 @notice-bar-warning-color: #ed7b2f;
-@notice-bar-error-background-color: #fdecee;
+@notice-bar-error-bg-color: #fdecee;
 @notice-bar-error-color: #e34d59;
 
 @notice-bar: ~'@{prefix}-notice-bar';
@@ -29,6 +29,7 @@
     flex: 1;
     overflow-x: hidden;
     line-height: @notice-bar-line-height;
+    color: var(--td-notice-bar-font-color, @notice-bar-font-color);
   }
 
   &__content {
@@ -40,6 +41,17 @@
     white-space: normal;
   }
 
+  &__content--vertical {
+    height: @notice-bar-line-height;
+    line-height: @notice-bar-line-height;
+
+    &-item {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
   &__prefix-icon,
   &__suffix-icon {
     font-size: 44rpx;
@@ -49,29 +61,38 @@
     margin-right: 16rpx;
   }
 
-  &__extrq:not(:empty),
+  &__suffix-icon {
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  &__extra {
+    color: #0052d9;
+    font-weight: 700;
+  }
+
+  &__extra:not(:empty),
   &__suffix-icon:not(:empty) {
     margin-left: 16rpx;
   }
 
   // theme
   &--info {
-    color: @notice-bar-info-color;
-    background-color: @notice-bar-info-background-color;
+    color: var(--td-notice-bar-info-color, @notice-bar-info-color);
+    background-color: var(--td-notice-bar-info-bg-color, @notice-bar-info-bg-color);
   }
 
   &--success {
-    color: @notice-bar-success-color;
-    background-color: @notice-bar-success-background-color;
+    color: var(--td-notice-bar-success-color, @notice-bar-success-color);
+    background-color: var(--td-notice-bar-success-bg-color, @notice-bar-success-bg-color);
   }
 
   &--warning {
-    color: @notice-bar-warning-color;
-    background-color: @notice-bar-warning-background-color;
+    color: var(--td-notice-bar-warning-color, @notice-bar-warning-color);
+    background-color: var(--td-notice-bar-warning-bg-color, @notice-bar-warning-bg-color);
   }
 
   &--error {
-    color: @notice-bar-error-color;
-    background-color: @notice-bar-error-background-color;
+    color: var(--td-notice-bar-error-color, @notice-bar-error-color);
+    background-color: var(--td-notice-bar-error-bg-color, @notice-bar-error-bg-color);
   }
 }