Some useful React components that can be used in Blocklets.
npm install @blocklet/ui-react
# or
yarn add @blocklet/ui-react
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,
];
}}
/>