You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`parent` | selector, jQuery object, DOM element | `false` | If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area. |
141
+
`parent` | selector, jQuery object, DOM element | `null` | If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area. |
142
142
`toggle` | boolean | `true` | Toggles the collapsible element on invocation |
Copy file name to clipboardExpand all lines: docs/content/components/dropdowns.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1039,11 +1039,11 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d
1039
1039
| Name | Type | Default | Description |
1040
1040
| --- | --- | --- | --- |
1041
1041
|`autoClose`| boolean, string |`true`| Configure the auto close behavior of the dropdown: <ulclass="my-2"><li>`true` - the dropdown will be closed by clicking outside or inside the dropdown menu.</li><li>`false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing <kbd>esc</kbd> key)</li><li>`'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.</li> <li>`'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.</li></ul> Note: the dropdown can always be closed with the <kbd>ESC</kbd> key |
1042
-
|`boundary`| string, element |`'scrollParent'`| Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
1042
+
|`boundary`| string, element |`'clippingParents'`| Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
1043
1043
|`display`| string |`'dynamic'`| By default, we use Popper for dynamic positioning. Disable this with `static`. |
1044
-
|`offset`|number, string, function |`[0, 2]`| Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-coreui-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
1044
+
|`offset`|array, string, function |`[0, 2]`| Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-coreui-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
1045
1045
|`popperConfig`| null, object, function |`null`| To change CoreUI for Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the CoreUI for Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
1046
-
|`reference`| string, element |`'toggle'`| Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). |
1046
+
|`reference`| string, element, object|`'toggle'`| Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). |
Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.coreui.tab` event occurs).
453
-
454
-
```js
455
-
consttab=newcoreui.Tab('#someListItem')
456
-
457
-
tab.show()
458
-
```
459
-
460
-
#### dispose
461
-
462
-
Destroys an element's tab.
425
+
{{< callout danger >}}
426
+
{{< partial "callout-danger-async-methods.md" >}}
427
+
{{< /callout >}}
463
428
464
-
#### getInstance
429
+
Activates your content as a tab element.
465
430
466
-
*Static* method which allows you to get the tab instance associated with a DOM element
431
+
You can create a tab instance with the constructor, for example:
467
432
468
433
```js
469
-
consttab=coreui.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance
434
+
constcuiTab=newcoreui.Tab('#myTab')
470
435
```
471
436
472
-
#### getOrCreateInstance
473
-
474
-
*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized
475
-
476
-
```js
477
-
consttab=coreui.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance
478
-
```
437
+
{{< bs-table >}}
438
+
| Method | Description |
439
+
| --- | --- |
440
+
|`dispose`| Destroys an element's tab. |
441
+
|`getInstance`|*Static* method which allows you to get the tab instance associated with a DOM element, you can use it like this: `coreui.Tab.getInstance(element)`. |
442
+
|`getOrCreateInstance`|*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized You can use it like this: `coreui.Tab.getOrCreateInstance(element)`. |
443
+
|`show`| Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.coreui.tab` event occurs). |
Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.coreui.tab` event occurs).
601
+
You can create a tab instance with the constructor, for example:
*Static* method which allows you to get the tab instance associated with a DOM element
652
-
653
-
```js
654
-
consttab=coreui.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance
655
-
```
656
-
657
-
#### getOrCreateInstance
658
-
659
-
*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized
660
-
661
-
```js
662
-
consttab=coreui.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance
663
-
```
607
+
{{< bs-table >}}
608
+
| Method | Description |
609
+
| --- | --- |
610
+
|`dispose`| Destroys an element's tab. |
611
+
|`getInstance`|*Static* method which allows you to get the tab instance associated with a DOM element, you can use it like this: `coreui.Tab.getInstance(element)`. |
612
+
|`getOrCreateInstance`|*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized You can use it like this: `coreui.Tab.getOrCreateInstance(element)`. |
613
+
|`show`| Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.coreui.tab` event occurs). |
Copy file name to clipboardExpand all lines: docs/content/components/offcanvas.md
+18-16Lines changed: 18 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -80,22 +80,6 @@ You can use a link with the `href` attribute, or a button with the `data-coreui-
80
80
</div>
81
81
{{< /example >}}
82
82
83
-
### Dark offcanvas
84
-
85
-
Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
86
-
87
-
{{< example class="docs-example-offcanvas p-0 bg-light overflow-hidden" >}}
88
-
<divclass="offcanvas offcanvas-start show text-bg-dark"tabindex="-1"id="offcanvasDark"aria-labelledby="offcanvasDarkLabel">
Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-coreui-scroll` attribute to enable `<body>` scrolling.
@@ -154,6 +138,24 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
154
138
</div>
155
139
{{< /example >}}
156
140
141
+
## Dark offcanvas
142
+
143
+
<smallclass="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v4.2.2</small>
144
+
145
+
Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
146
+
147
+
{{< example class="docs-example-offcanvas p-0 bg-light overflow-hidden" >}}
148
+
<divclass="offcanvas offcanvas-start show text-bg-dark"tabindex="-1"id="offcanvasDark"aria-labelledby="offcanvasDarkLabel">
0 commit comments