@alitajs/tabs-layout
v2.9.0
Published
@alitajs/tabs-layout
Downloads
442
Readme
@alitajs/tabs-layout
请不要和 keep alive 插件一起使用,两者功能上相似
安装
yarn add @alitajs/tabs-layout
配置
export default {
plugins: ['@alitajs/tabs-layout'],
tabsLayout: [/./], // 这里表示所有的页面
};
tabsLayout
是一个数组,写明需要使用 tabs 的页面,支持字符串和正则表达式,如需要全部匹配,可以设置 tabsLayout: [/./]
。
使用
需要使用 TabsLayout
替换 children
。
import React from 'react';
import { TabsLayout } from 'alita';
const BasicLayout: React.FC = (props) => {
return (
<div>
- {props.children}
+ <TabsLayout {...props} />
</div>
);
};
export default BasicLayout;
如果你的 props 有其他用途,那至少需要传给 TabsLayout
两个属性 location
,children
import React from 'react';
import { TabsLayout } from 'umi';
const BasicLayout: React.FC = ({ location, children }) => {
return (
<div>
<TabsLayout location={location}>{children}</TabsLayout>
</div>
);
};
export default BasicLayout;