安装

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 参考

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 链接，用于站内跳转
}