bootstrap-vue
Version:
BootstrapVue, with over 40 plugins and more than 80 custom components, provides one of the most comprehensive implementations of Bootstrap v4 components and grid system for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
197 lines (196 loc) • 6.71 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": "pills",
"description": "Renders the nav items with the appearance of pill buttons"
},
{
"prop": "small",
"description": "Makes the nav smaller"
},
{
"prop": "align",
"description": "Align the nav items in the nav: 'start' (or 'left'), 'center', 'end' (or 'right')"
},
{
"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": "vertical",
"description": "Renders the nav vertically"
},
{
"prop": "card",
"description": "When set to true, renders the tabs the the appropriate styles to be placed into a 'b-card'"
},
{
"prop": "vertical",
"description": "Renders the tab controls vertically"
},
{
"prop": "end",
"description": "Place the tab controls at the bottom (horizontal tabs), or right (vertical tabs)"
},
{
"prop": "lazy",
"description": "Lazily render the b-tab contents when shown"
},
{
"prop": "noNavStyle",
"description": "Do not render the tab controls with tab styling"
},
{
"prop": "noKeyNav",
"description": "Disable keyboard navigation of the tab controls"
},
{
"prop": "contentClass",
"description": "CSS class (or classes) to apply to the tab-content wrapper"
},
{
"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": "activeTabClass",
"description": "CSS class (or classes) to apply to the currently active tab"
},
{
"prop": "activeNavItemClass",
"description": "CSS class (or classes) to apply to the active nav item tab control"
},
{
"prop": "value",
"description": "Currently visible tab index (zero-based)"
}
],
"events": [
{
"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)"
}
]
},
{
"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": "bvEvt",
"type": "BvEvent",
"description": "BvEvent object. Call bvEvt.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."
}
]
}
],
"slots": [
{
"name": "tabs-start",
"description": "Additional tab buttons without tab content placed before content tab buttons"
},
{
"name": "tabs-end",
"description": "Additional tab buttons without tab content placed after content tab buttons"
},
{
"name": "empty",
"description": "Renders this slot if no tabs are present"
}
]
},
{
"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": "titleItemClass",
"description": "CSS class (or classes) to apply to the tab's control button 'li' element"
},
{
"prop": "titleLinkClass",
"description": "CSS class (or classes) to apply to the tab's control button inner link element"
},
{
"prop": "noBody",
"description": "When the parent b-tabs has the 'card' prop set, do not render a card-body wrapper"
},
{
"prop": "lazy",
"description": "Lazily render this tab's content when shown"
}
],
"events": [
{
"event": "click",
"description": "Emitted when a tab is clicked, or is activated by keyboard navigation",
"args": [
{
"arg": "evt",
"type": "MouseEvent",
"description": "Original event object"
}
]
}
],
"slots": [
{
"name": "title",
"description": "Slot for custom tab title"
}
]
}
]
}
}