通告栏 NoticeBar

用于循环播放展示一组消息通知，可设置横向滚动和纵向滚动

使用

API

用法示例

基础用法

<ti-notice-bar content="内容文字"></ti-notice-bar>

纵向滚动

<ti-notice-bar id="ti-notice-bar" variant="vertical"></ti-notice-bar>

function onChange(event) {
  var tiNoticeBar = document.getElementById("ti-notice-bar");
  tiNoticeBar.content = ['内容1', '内容2'];
};

滚动速度

<ti-notice-bar content="内容文字" speed="100"></ti-notice-bar>

内容超出后显示方式

属性含义：

1. auto 内容超出一行，variant为horizontal时，默认滚动播放；variant 为 vertical 时截断。一般用于横向滚动。
2. wrap 内容超出后换行，不可滚动。此模式为纯静态展示。
3. ellipsis 内容超出一行缺省，一般用于纵向滚动。
4. clip 内容超出一行截断，一般用于纵向滚动。

<ti-notice-bar content="内容文字" text-mode="auto"></ti-notice-bar>
<ti-notice-bar content="内容文字" text-mode="wrap"></ti-notice-bar>
<ti-notice-bar content="内容文字" text-mode="ellipsis"></ti-notice-bar>
<ti-notice-bar content="内容文字" text-mode="clip"></ti-notice-bar>

ti-notice-bar API

属性 Properties

名称	类型	必填	默认值	说明	备注
content	string | array	是	否	展示内容，纵向滚动时传入array	-
color	string	否	theme.color.brand.1000	文字颜色，背景色默认为文字颜色加 10%透明度	-
speed	number	否	50	滚动速率 (px/s)	-
variant	string	否	horizontal	滚动方式，可选值horizontal vertical	-
scrollable	boolean	否	false	是否开启滚动播放，内容长度溢出时默认开启	-
left-icon	string	否	-	左侧图标	-
right-icon	string	否	-	右侧图标	-
text-mode	string	否	auto	文本溢出样式，可选值auto wrap ellipsis clip	wrap 即文本溢出换行，此状态为禁止状态，不可滚动播放
ext-style	string	否	-	根节点样式	-

事件 Events

名称	参数列表	描述	备注
click	(e: Event) => void	点击通知栏时触发	-

插槽 Slots

名称	说明	备注
before	内容左面的插槽	-
after	内容右侧的插槽	-

外部样式类 External Classes

名称	说明	备注
ext-class	根节点样式类	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--notice-bar-font-size	theme.fontSize.t5	文字字号	-
--notice-bar-color	theme.color.brand.1000	通告栏文字颜色，默认跟随主题色	-
--notice-bar-background-color	theme.color.brand.100	通告栏背景色，默认跟随主题色加10%透明度	-
--notice-bar-padding-v	theme.spacing.vertical.v4	通告栏垂直方向内边距	-
--notice-bar-padding-h	theme.spacing.horizontal.h7	通告栏水平方向内边距	-
--notice-bar-line-height	theme.lineHeight.multiline.t4	通告栏文字行高	-
--notice-bar-left-icon-size	theme.fontSize.t10	左侧icon尺寸	-
--notice-bar-left-icon-color	theme.color.brand.1000	左侧icon颜色	-
--notice-bar-right-icon-size	theme.fontSize.t4	右侧icon尺寸	-
--notice-bar-right-icon-color	theme.color.brand.1000	右侧icon颜色	-