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
328 lines (327 loc) • 10.4 kB
JSON
{
"name": "@bootstrap-vue/dropdown",
"version": "1.0.0",
"meta": {
"title": "Dropdown",
"description": "Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.",
"components": [
{
"component": "BDropdown",
"aliases": [
"BDd"
],
"props": [
{
"prop": "size",
"description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
},
{
"prop": "variant",
"description": "Applies one of the Bootstrap theme color variants to the component"
},
{
"prop": "text",
"description": "Text to place in the toggle button, or in the split button is split mode"
},
{
"prop": "html",
"description": "HTML string to place in the toggle button, or in the split button is split mode. Use with caution"
},
{
"prop": "dropup",
"description": "When set, positions the menu on the top of the button"
},
{
"prop": "dropright",
"description": "When set, positions the menu to the right of the button"
},
{
"prop": "dropleft",
"description": "When set, positions the menu to the left of the button"
},
{
"prop": "right",
"description": "Align the right edge of the menu with the right of the button"
},
{
"prop": "noFlip",
"description": "Prevent the menu from auto flipping positions"
},
{
"prop": "offset",
"description": "Specify the number of pixels to shift the menu by. Negative values supported"
},
{
"prop": "lazy",
"description": "When set, will only mount the menu content into the DOM when the menu is open"
},
{
"prop": "popperOpts",
"description": "Additional configuration to pass to Popper.js"
},
{
"prop": "toggleText",
"description": "ARIA label (sr-only) to set on the toggle when in split mode"
},
{
"prop": "menuClass",
"description": "CSS class (or classes) to add to the menu container"
},
{
"prop": "toggleTag",
"description": "Specify the HTML tag to render instead of the default tag. Use with caution"
},
{
"prop": "toggleClass",
"description": "CSS class (or classes) to add to the toggle button"
},
{
"prop": "block",
"version": "2.1.0",
"description": "Renders a 100% width toggle button (expands to the width of its parent container)"
},
{
"prop": "noCaret",
"description": "Hide the caret indicator on the toggle button"
},
{
"prop": "split",
"description": "When set, renders a split button dropdown"
},
{
"prop": "splitHref",
"description": "Denotes the target URL of the link for the split button"
},
{
"prop": "splitTo",
"description": "<router-link> prop: Denotes the target route of the split button. When clicked, the value of the to prop will be passed to router.push() internally, so the value can be either a string or a Location descriptor object"
},
{
"prop": "splitVariant",
"description": "Applies one of the Bootstrap theme color variants to the split button. Defaults to the 'variant' prop value"
},
{
"prop": "splitButtonType",
"description": "Value to place in the 'type' attribute on the split button: 'button', 'submit', 'reset'"
},
{
"prop": "splitClass",
"version": "2.2.0",
"description": "CSS class (or classes) to add to the split button"
},
{
"prop": "boundary",
"description": "The boundary constraint of the menu: 'scrollParent', 'window', 'viewport', or a reference to an HTMLElement"
}
],
"events": [
{
"event": "show",
"description": "Emitted just before dropdown is shown. Cancelable.",
"args": [
{
"arg": "bvEvt",
"type": "BvEvent",
"description": "BvEvent object. Call bvEvt.preventDefault() to cancel show."
}
]
},
{
"event": "shown",
"description": "Emitted when dropdown is shown."
},
{
"event": "hide",
"description": "Emitted just before dropdown is hidden. Cancelable.",
"args": [
{
"arg": "bvEvt",
"type": "BvEvent",
"description": "BvEvent object. Call bvEvt.preventDefault() to cancel hide."
}
]
},
{
"event": "hidden",
"description": "Emitted when dropdown is hidden."
},
{
"event": "toggle",
"description": "Emitted when toggle button is clicked."
},
{
"event": "click",
"description": "Emitted when split button is clicked in split mode.",
"args": [
{
"arg": "event",
"type": "MouseEvent",
"description": "Native click event object"
}
]
},
{
"event": "bv::dropdown::show",
"description": "Emitted on $root just before dropdown is shown. Cancelable.",
"args": [
{
"arg": "bvEvt",
"type": "BvEvent",
"description": "BvEvent object. Call bvEvt.preventDefault() to cancel show."
}
]
},
{
"event": "bv::dropdown::hide",
"description": "Emitted on $root just before dropdown is hidden. Cancelable.",
"args": [
{
"arg": "bvEvt",
"type": "BvEvent",
"description": "BvEvent object. Call bvEvt.preventDefault() to cancel hide."
}
]
}
],
"slots": [
{
"name": "button-content",
"description": "Can be used to implement custom text with icons and more styling."
},
{
"name": "default",
"description": "Optionally scoped default slot for dropdown menu content",
"scope": [
{
"prop": "hide",
"type": "Function",
"description": "Can be used to close the dropdown menu. Accepts an optional boolean argument, which if true returns focus to the toggle button."
}
]
}
]
},
{
"component": "BDropdownItem",
"aliases": [
"BDdItem"
],
"props": [
{
"prop": "linkClass",
"version": "2.9.0",
"description": "Class or classes to apply to the inner link element"
}
],
"events": [
{
"event": "click",
"description": "Emitted when item is clicked.",
"args": [
{
"name": "event",
"type": "MouseEvent",
"description": "Native click event object"
}
]
}
]
},
{
"component": "BDropdownItemButton",
"aliases": [
"BDropdownItemBtn",
"BDdItemButton",
"BDdItemBtn"
],
"props": [
{
"prop": "buttonClass",
"version": "2.9.0",
"description": "Class or classes to apply to the inner button element"
}
],
"events": [
{
"event": "click",
"description": "Emitted when button item is clicked.",
"args": [
{
"name": "event",
"type": "MouseEvent",
"description": "Native click event object"
}
]
}
]
},
{
"component": "BDropdownDivider",
"aliases": [
"BDdDivider"
]
},
{
"component": "BDropdownForm",
"aliases": [
"BDdForm"
],
"props": [
{
"prop": "inline",
"description": "When set, the form will be in inline mode which display labels, form controls, and buttons on a single horizontal row"
},
{
"prop": "novalidate",
"description": "When set, disables browser native HTML5 validation on controls in the form"
},
{
"prop": "validated",
"description": "When set, adds the Bootstrap class 'was-validated' on the form, triggering the native browser validation states"
},
{
"prop": "formClass",
"version": "2.2.0",
"description": "CSS class (or classes) to add to the form"
}
]
},
{
"component": "BDropdownText",
"props": [
{
"prop": "textClass",
"description": "Class or classes to apply to the inner element"
}
],
"aliases": [
"BDdText"
]
},
{
"component": "BDropdownGroup",
"aliases": [
"BDdGroup"
],
"props": [
{
"prop": "headerClasses",
"description": "CSS class (or classes) to add to the header"
}
],
"slots": [
{
"name": "header",
"description": "Optional header content for the dropdown group."
}
]
},
{
"component": "BDropdownHeader",
"aliases": [
"BDdHeader"
]
}
]
}
}