# vtabs
Longitudinal tab components, with the <vtabs-content> Components used in combination.
# install
npm install @ miniprogram-component-plus/vtabs
npm install @ miniprogram-component-plus/vtabs-content
On the page page.json in
// page.json
{
"usingComponents": {
"mp-vtabs": @ miniprogram-component-plus/vtabs",
"mp-vtabs-content": @ miniprogram-component-plus/vtabs-content"
}
}
# List of properties
| attribute | type | Default values | Required | Introductions |
|---|---|---|---|---|
| vtabs | Array | [] | yes | The data item format is {title} |
| active-tab | Number | 0 | no | to activate tab Indexes |
| tab-bar-class | String | no | Tab Styles | |
| active-class | String | no | Check style | |
| tab-bar-line-color | String | #ff0000 | no | Color of Underlined Side of Selected Items |
| tab-inactive-text-color | String | #000000 | no | Unchecked font color |
| tab-bar-active-text-color | String | #ff0000 | no | Check font color |
| tab-inactive-bg-color | String | #eeeeee | no | Unchecked background color |
| tab-active-bg-color | String | #ffffff | no | Check Background Color |
| animation | Boolean | true | no | Turn on animation |
| Bindtablick | eventhandle | no | to hit tab When triggered, e.detail={index} | |
| bindchange | eventhandle | no | Content area scrolling causes tab Triggered upon change, and.detail={index} |
# vtabs-content
Longitudinal tab content.
| attribute | type | Default values | Required | Introductions |
|---|---|---|---|---|
| tab-index | Number | 0 | yes | vtabs Data Indexing (0 Based) |