tab-container-vue-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

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";