bootstrap-vue
Version:
With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extens
206 lines (205 loc) • 7.04 kB
JSON
{
"name": "@bootstrap-vue/tabs",
"version": "1.0.0",
"meta": {
"title": "Tabs",
"description": "Create a widget of tabbable panes of local content. The tabs component is built upon navs and cards internally, and provides full keyboard navigation control of the tabs.",
"components": [
{
"component": "BTabs",
"props": [
{
"prop": "activeNavItemClass",
"description": "CSS class (or classes) to apply to the active nav item tab control"
},
{
"prop": "activeTabClass",
"description": "CSS class (or classes) to apply to the currently active tab"
},
{
"prop": "align",
"description": "Align the nav items in the nav: 'start' (or 'left'), 'center', 'end' (or 'right')"
},
{
"prop": "card",
"description": "When set to true, renders the tabs the the appropriate styles to be placed into a 'b-card'"
},
{
"prop": "contentClass",
"description": "CSS class (or classes) to apply to the tab-content wrapper"
},
{
"prop": "end",
"description": "Place the tab controls at the bottom (horizontal tabs), or right (vertical tabs)"
},
{
"prop": "fill",
"description": "Proportionately fills all horizontal space with nav items. All horizontal space is occupied, but not every nav item has the same width"
},
{
"prop": "justified",
"description": "Fills all horizontal space with nav items, but unlike 'fill', every nav item will be the same width"
},
{
"prop": "lazy",
"description": "Lazily render the b-tab contents when shown"
},
{
"prop": "navClass",
"description": "CSS class (or classes) to apply to the tablist (nav) wrapper"
},
{
"prop": "navWrapperClass",
"description": "CSS class (or classes) to apply to the tab controls wrapper element"
},
{
"prop": "noKeyNav",
"description": "Disable keyboard navigation of the tab controls"
},
{
"prop": "noNavStyle",
"description": "Do not render the tab controls with tab styling"
},
{
"prop": "pills",
"description": "Renders the nav items with the appearance of pill buttons"
},
{
"prop": "small",
"description": "Makes the nav smaller"
},
{
"prop": "value",
"description": "Currently visible tab index (zero-based)"
},
{
"prop": "vertical",
"description": "Renders the nav vertically"
},
{
"prop": "vertical",
"description": "Renders the tab controls vertically"
}
],
"events": [
{
"event": "activate-tab",
"version": "2.1.0",
"description": "Emitted just before a tab is shown/activated. Cancelable",
"args": [
{
"arg": "newTabIndex",
"type": "Number",
"description": "Tab being activated (0-based index)"
},
{
"arg": "prevTabIndex",
"type": "Number",
"description": "Tab that is currently active (0-based index). Will be -1 if no current active tab"
},
{
"arg": "bvEvent",
"type": "BvEvent",
"description": "BvEvent object. Call bvEvent.preventDefault() to cancel"
}
]
},
{
"event": "changed",
"description": "Emitted when a tab is added, removed, or tabs are re-ordered",
"args": [
{
"arg": "currentTabs",
"type": "Array",
"description": "Array of the current b-tab instances, in document order"
},
{
"arg": "previousTabs",
"type": "Array",
"description": "Array of the previous b-tab instances, in document order"
}
]
},
{
"event": "input",
"description": "Emitted when a tab is shown. Used to update the v-model",
"args": [
{
"arg": "tabIndex",
"type": "Number",
"description": "Current selected tab index (0-based index)"
}
]
}
],
"slots": [
{
"name": "default",
"description": "Content (tabs) to place in the tabs element"
},
{
"name": "empty",
"description": "Renders this slot if no tabs are present"
},
{
"name": "tabs-end",
"description": "Additional tab buttons without tab content placed after content tab buttons"
},
{
"name": "tabs-start",
"description": "Additional tab buttons without tab content placed before content tab buttons"
}
]
},
{
"component": "BTab",
"props": [
{
"prop": "buttonId",
"description": "Use a specific ID for this tab's tab control button. If not provided, one will automatically be generated"
},
{
"prop": "lazy",
"description": "Lazily render this tab's content when shown"
},
{
"prop": "noBody",
"description": "When the parent b-tabs has the 'card' prop set, do not render a card-body wrapper"
},
{
"prop": "titleItemClass",
"description": "CSS class (or classes) to apply to the tab's control button 'li' element"
},
{
"prop": "titleLinkAttributes",
"version": "2.6.0",
"description": "Attributes to apply to the tab's control button inner link element"
},
{
"prop": "titleLinkClass",
"description": "CSS class (or classes) to apply to the tab's control button inner link element"
}
],
"events": [
{
"event": "click",
"description": "Emitted when a tab is clicked, or is activated by keyboard navigation",
"args": [
{
"arg": "event",
"type": "MouseEvent",
"description": "Original event object"
}
]
}
],
"slots": [
{
"name": "title",
"description": "Slot for custom tab title"
}
]
}
]
}
}