Note: Nested sub-menus are not supported. Renders as an element by default.Īn alternative to that renders a menu item using a element.Ī divider / spacer which can be used to separate dropdown items.įor placing form controls within a dropdown menu.įor grouping dropdown sub components with an optional header.Ī header item, used to help identify a group of dropdown items. Using any other component or markup may break layout and/or keyboard navigation.Īction items that provide click, link, and / functionality. The following components can be placed inside of your dropdowns. You can instruct to render the menu contents only when it is shown by setting the lazy prop to true. When there are a large number of dropdowns rendered on the same page, performance could be impacted due to larger overall memory utilization. Lazy dropdownīy default, renders the menu contents in the DOM even when the menu is not shown. Note: The caret will always be shown when using split mode. 🔍 Search Action Another action Something else here. You can give the split button its own variant via the split-variant prop. Split button color variantīy default the left split button uses the same variant as the toggle button. This prop accepts either a string or array of strings. You can also apply arbitrary classes to the toggle button via the toggle-class prop.
Action Another action Something else here Action Another action Something else here Action Another action Something else here
#Space drop vuii full#
See the Variant Reference for a full list of built-in contextual variants. The dropdown toggle button can have one of the standard Bootstrap contextual variants applied by setting the prop variant to success, primary, info, danger, link, outline-dark, etc. Note: changing the size of the button(s) does not affect the size of the menu items! Dropdown color variants Action Another action Something else here. Action Another action Something else here Action Another action Something else here. Split button supportĬreate a split dropdown button, where the left button provides standard click event and link support, while the right hand side is the dropdown menu toggle button. Note: The props offset, boundary and no-flip may loose their effect when you overwrite the Popper.js configuration. Head to the Popper.js docs to see all the configuration options. If you need some advanced Popper.js configuration to make dropdowns behave to your needs, you can use the popper-opts prop to pass down a custom configuration object which will be deeply merged with the BootstrapVue defaults. In these cases you may need to wrap your dropdown inside another element. In some situations this may affect your layout or positioning of the dropdown trigger button. Note: When boundary is any value other than the default of 'scrollParent', the style position: static is applied to to the dropdown component's root element in order to allow the menu to "break-out" of its scroll container. The boundary value is passed directly to Popper.js's boundariesElement configuration option. Supported values are 'scrollParent' (the default), 'viewport', 'window' or a reference to an HTML element. To get around this, you can specify a boundary element via the boundary prop. However, if you place a dropdown inside an element that has overflow: scroll (or similar) set, the dropdown menu may - in some situations - get cut off. Action Another action Something else here Boundary constraintīy default, dropdowns are visually constrained to its scroll parent, which will suffice in most situations. 0.3rem, 4px, 1.2em, etc.) passed as a string.
0 kommentar(er)
