| | |
|---|
| | | |
|---|
| | | ## 代码演示 |
|---|
| | | |
|---|
| | | <a href="https://developers.weixin.qq.com/s/ul8DximQ79SB" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a> |
|---|
| | | |
|---|
| | | <blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" > |
|---|
| | | <p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p> |
|---|
| | | </blockquote> |
|---|
| | | |
|---|
| | | ### 01 组件类型 |
|---|
| | | |
|---|
| | | 纯文字的公告栏 |
|---|
| | |
|---|
| | | -- | -- | -- | -- | -- |
|---|
| | | content | String / Array / Slot | - | 文本内容 | N |
|---|
| | | direction | String | horizontal | 滚动方向。可选项：horizontal/vertical | N |
|---|
| | | external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。。`['t-class', 't-class-content', 't-class-prefix-icon', 't-class-operation', 't-class-suffix-icon']` | N |
|---|
| | | operation | String / Slot | - | 右侧额外信息 | 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 |
|---|
| | | interval | Number | 2000 | 间隔时间【仅在 direction='vertical' 有效】。 | N |
|---|
| | | prefix-icon | String / Boolean / Object / Slot | - | 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标。| N |
|---|
| | | suffix-icon | String / Object / Slot | - | 后缀图标。值为字符串表示图标名称。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标。 | N |
|---|
| | | theme | String | info | 内置主题。可选项：info/success/warning/error | N |
|---|
| | |
|---|
| | | 名称 | 参数 | 描述 |
|---|
| | | -- | -- | -- |
|---|
| | | click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/> |
|---|
| | | change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | 当 `direction="vertical"` 时轮播切换时触发 |
|---|
| | | |
|---|
| | | ### NoticeBar 外部样式类 |
|---|
| | | 类名 | 说明 |
|---|
| | | -- | -- |
|---|
| | | t-class | 根节点样式类 |
|---|
| | | t-class-content | 内容样式类 |
|---|
| | | t-class-prefix-icon | 前置图标样式类 |
|---|
| | | t-class-operation | 右侧额外信息样式类 |
|---|
| | | t-class-suffix-icon | 后置图标样式类 |
|---|
| | | |
|---|
| | | ### CSS 变量 |
|---|
| | | 组件提供了下列 CSS 变量，可用于自定义样式。 |
|---|
| | | 名称 | 默认值 | 描述 |
|---|
| | | -- | -- | -- |
|---|
| | | --td-notice-bar-error-bg-color | @error-color-1 | - |
|---|
| | | --td-notice-bar-error-color | @error-color-6 | - |
|---|
| | | --td-notice-bar-font-color | @font-gray-1 | - |
|---|
| | | --td-notice-bar-info-bg-color | @brand-color-light | - |
|---|
| | | --td-notice-bar-info-color | @brand-color | - |
|---|
| | | --td-notice-bar-operation-font-color | @brand-color | - |
|---|
| | | --td-notice-bar-success-bg-color | @success-color-1 | - |
|---|
| | | --td-notice-bar-success-color | @success-color | - |
|---|
| | | --td-notice-bar-suffix-icon-color | @font-gray-3 | - |
|---|
| | | --td-notice-bar-warning-bg-color | @warning-color-1 | - |
|---|
| | | --td-notice-bar-warning-color | @warning-color | - |
|---|
