4.0.0 • Published 4 years ago
tab-container-component v4.0.0
tab-container-component
A vuejs and reactjs tab container component.
features
- vuejs component
- reactjs component
- content is custom component
- tab can be closed
- title can be custom component
link css
<link rel="stylesheet" href="./node_modules/tab-container-component/dist/tab-container.min.css" />
vuejs component
npm i tab-container-vue-component
import "tab-container-vue-component";
or
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.min.js"></script>
<script src="./node_modules/tab-container-vue-component/dist/tab-container-vue-component.min.js"></script>
<tab-container :data="data">
</tab-container>
the online demo: https://plantain-00.github.io/tab-container-component/packages/vue/demo
reactjs component
npm i tab-container-react-component
import { TabContainer } from "tab-container-react-component";
or
<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/tab-container-react-component/dist/tab-container-react-component.min.js"></script>
<TabContainer data={this.data}>
</TabContainer>
the online demo: https://plantain-00.github.io/tab-container-component/packages/react/demo
properties and events of the component
name | type | description |
---|---|---|
data | TabContainerData[] | the data of the tab-container |
close | (index: number)=>void | triggered when a tab is going to close |
switching | (index: number)=>void | triggered when a tab is going to switch |
tab-container data structure
export type TabContainerData = {
isActive: boolean;
title?: string;
titleComponent?: string | Function;
titleData?: any; // the data will be passed to the titleComponent as `data` props
component: string | Function; // the item component, for vuejs, it is the component name, for reactjs, it is the class object
data: any; // the data will be passed to the component as `data` props
canClose?: boolean;
};
change logs
# v2
npm i tab-container-component
# v3
npm i tab-container-vue-component
npm i tab-container-react-component
// v2
import "tab-container-component/vue";
import { TabContainer } from "tab-container-component/react";
// v3
import "tab-container-vue-component";
import { TabContainer } from "tab-container-react-component";
// v2
<link rel="stylesheet" href="./node_modules/tab-container-component/tab-container.min.css" />
// v3
<link rel="stylesheet" href="./node_modules/tab-container-component/dist/tab-container.min.css" />
// v2
import "tab-container-component/vue";
// v1
import "tab-container-component/dist/vue";