@blocklet/ui-react

Some useful React components that can be used in Blocklets.

安装

npm install @blocklet/ui-react

# or
yarn add @blocklet/ui-react

使用

Header/Footer

import Header from '@blocklet/ui-react/lib/Header';
import Footer from '@blocklet/ui-react/lib/Footer';

function App() {
  return (
    <div>
      <Header />
      ...
      <Footer />
    </div>
  );
}

<Header /> 或 <Footer /> 会获取 blocklet meta (window.blocklet) 中的配置信息, 包括 app logo, app name, navigation links 等，然后基于这些配置信息渲染一个 page header 或 page footer。

如果 <Header /> 上层存在 Session Context Provider，那么 Header 组件会在右侧区域自动渲染一个用户身份信息的按钮 (SessionManager)。 类似的，如果 <Header /> 上层存在 Locale Context Provider，那么 Header 组件会在右侧区域自动渲染一个语言选择器按钮 (LocaleSelector)。

也可以显式地传入 blocklet meta:

const blockletMeta = {
  appName: 'Blocklet Name',
  appLogo: 'logo url',
  theme: {
    background: '#cfefe8',
  },
  navigation: [
    {
      title: 'Home',
      link: '/',
    },
    ...
  ],
};

function App() {
  return (
    <div>
      <Header blockletMeta={blockletMeta} />
      ...
    </div>
  );
}

定制 Header 右侧 addons 区域:

<Header
  blockletMeta={meta}
  addons={addons => {
    return [
      <Button
        variant="contained"
        color="primary"
        size="small"
        style={{ marginRight: 8 }}>
        Addons
      </Button>,
      <Button color="primary" size="small" style={{ marginRight: 8 }}>
        Addons
      </Button>,
      ...addons,
    ];
  }}
/>