通告栏 NoticeBar

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

使用

API

安装使用

import { TiNoticeBar } from '@titian-design/mobile-react'

用法示例

基础用法

codesanbox

copy

code

import React from 'react';
import { TiNoticeBar } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiNoticeBar content="内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字" />
    </div>
  );
}

滚动速度

codesanbox

copy

code

import React from 'react';
import { TiNoticeBar } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiNoticeBar content={['内容1', '内容2']} variant="vertical" speed={100} />
    </div>
  );
}

纵向滚动

codesanbox

copy

code

import React from 'react';
import { TiNoticeBar } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiNoticeBar
        content={[
          '内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字',
          '内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字',
        ]}
        variant="vertical"
      />
    </div>
  );
}

内容超出后显示方式

codesanbox

copy

code

import React from 'react';
import { TiNoticeBar } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <div className="content">
        <TiNoticeBar
          content="内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字"
          textMode="auto"
        />
      </div>
      <div className="content">
        <TiNoticeBar
          content="内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字"
          textMode="wrap"
        />
      </div>
      <div className="content">
        <TiNoticeBar
          content="内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字"
          textMode="ellipsis"
        />
      </div>
      <div className="content">
        <TiNoticeBar
          content={[
            '内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字',
            '内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字',
          ]}
          variant="vertical"
          textMode="clip"
        />
      </div>
    </div>
  );
}

属性含义：

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

TiNoticeBar 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	是否开启滚动播放，内容长度溢出时默认开启	-
leftIcon	string	否	-	左侧图标	-
rightIcon	string	否	-	右侧图标	-
textMode	string	否	auto	文本溢出样式，可选值auto wrap ellipsis clip	wrap 即文本溢出换行，此状态为禁止状态，不可滚动播放
extStyle	string	否	-	根节点样式	-

事件 Events

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

插槽 Slots

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

外部样式类 External Classes

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

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颜色	-