安装

npm i @douyinfe/semi-site-banner

使用

UMD 版本由于 SSR 原因，没有将样式内联进去，因此 CSS 需要单独引入。

import React from 'react';
import SemiSiteReactBanner from '@douyinfe/semi-site-banner';
import '@douyinfe/semi-site-banner/dist/index.css';

class App extends React.Component {
  render() {
    const data = {
      zh: {
            "title": "抖音系企业应用设计系统 Semi Design 开源啦 🎉",
            "href": "https://bytedance.feishu.cn/docx/doxcnuCrjVb0zQEnqpzYzsisXkc#doxcnCaqWgw0oOgGumcwu58G47f"
      },
      en: {
            "title": "Build sensible web app with Semi Design, now is open-sourced 🎉",
            "href": "https://bytedance.feishu.cn/docx/doxcnuCrjVb0zQEnqpzYzsisXkc#doxcnCaqWgw0oOgGumcwu58G47f"
      },
    };
  
    return (
      <div style={{ backgroundColor: '#FFF', padding: 20 }}>
        <SemiSiteReactBanner type="default" />
        <br />
        <SemiSiteReactBanner type="default" icon={null} />
        <br />
        <SemiSiteReactBanner data={data} icon={<IconGift style={{ color: '#FBCD2C' }} />} />
        <br />
        <SemiSiteReactBanner type="blue" />
        <br />
        <SemiSiteReactBanner type="colour" />
        <br />
        <SemiSiteReactBanner type="black" />
      </div>
    );
  }
}

Data 配置

data 用于配置 banner 显示内容，可以选择直接通过 prop 配置和通过 TCC 配置。推荐使用 TCC 配置，可以动态更新。

• 通过 TCC 进行配置可以动态更新banner内容，用户点击关闭后如果 TCC 数据没有更新则不再打开；
• 通过 data prop 直接进行配置，用户关闭后 7 日内不会再显示。

API 参考

| 参数名 | 说明 | 类型 | 默认值 | | --------- | --------------------------------------------------- | ---------------------------------------------------- | ------------- | | data | 通过 data prop 配置 banner | BannerData | null | | type | 预设的几种背景色，可选 default、blue、colour、black | string | default | | icon | 自定义通知icon，type 为default有默认icon | ReactNode | - | | closeIcon | 自定义关闭按钮 | ReactNode | <IconClose /> | | className | 自定义类名 | string | - | | style | 自定义样式 | CSSProperties | - | | onClose | 点击关闭按钮时的回调 | Function | () => {} |

type BannerData = 
    BaseBannerData | // 直接通过 prop 配置
    ({ [x: string]: BaseBannerData;}); // 通过 TCC 配置

interface BaseBannerData {
  zh?: DataItem;
  en?: DataItem;
  style?: React.CSSProperties;
}

interface DataItem {
  title?: string;
  href?: string; // 完整的 url 链接
  path?: string; // 没有域名的 url 链接，用于站内跳转
}