how to umi plugin panel tabs with an example project
时间: 2024-05-05 12:21:14 浏览: 7
Sure! Here's an example project that uses Umi Plugin Panel Tabs:
1. Create a new Umi project using the following command:
```
$ yarn create umi my-app
```
2. Install the Umi Plugin Panel Tabs package:
```
$ yarn add umi-plugin-panel-tabs
```
3. Open `.umirc.ts` and configure the plugin:
```
import { defineConfig } from 'umi';
export default defineConfig({
// Other configurations...
plugins: [
// Add the plugin here
['umi-plugin-panel-tabs', {}],
],
});
```
4. Create a new page and add some content:
```
import React from 'react';
import { Tabs } from 'antd';
const { TabPane } = Tabs;
export default () => {
return (
<Tabs defaultActiveKey="1">
<TabPane tab="Tab 1" key="1">
<p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p>
</TabPane>
<TabPane tab="Tab 2" key="2">
<p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p>
</TabPane>
<TabPane tab="Tab 3" key="3">
<p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p>
</TabPane>
</Tabs>
);
};
```
5. Run the project and click on the "Panel" button in the top right corner of the page. You should see the Tabs component displayed in a panel on the right side of the page.
That's it! You now have a Umi project with Umi Plugin Panel Tabs. You can customize the plugin by passing options to the plugin configuration object. For more information, check out the plugin's documentation on the Umi website.