From a329575d82a65660ffa7b18cbd9f291e0ee7eef5 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Fri, 2 Sep 2022 15:44:07 +0200 Subject: [PATCH] Set up a resuming table such as what's in other components. --- .../content/docs/5.2/components/list-group.md | 66 ++++------------- site/content/docs/5.2/components/navs-tabs.md | 71 +++---------------- 2 files changed, 26 insertions(+), 111 deletions(-) diff --git a/site/content/docs/5.2/components/list-group.md b/site/content/docs/5.2/components/list-group.md index 1fe7d4bc58d5..7804c740695d 100644 --- a/site/content/docs/5.2/components/list-group.md +++ b/site/content/docs/5.2/components/list-group.md @@ -442,62 +442,26 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane ### Methods -#### constructor - -Activates a list item element and content container. Tab should have either a `data-bs-target` or an `href` targeting a container node in the DOM. - -```html -
- Home - Profile - Messages - Settings -
- -
-
...
-
...
-
...
-
...
-
- - -``` - -#### 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.bs.tab` event occurs). - -```js -const tab = new bootstrap.Tab('#someListItem') - -tab.show() -``` - -#### dispose - -Destroys an element's tab. +{{< callout danger >}} +{{< partial "callout-danger-async-methods.md" >}} +{{< /callout >}} -#### getInstance +Activates your content as a tab element. -*Static* method which allows you to get the tab instance associated with a DOM element. +You can create a tab instance with the constructor, for example: ```js -const tab = bootstrap.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance +const bsTab = new bootstrap.Tab('#myTab') ``` -#### 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. - -```js -const tab = bootstrap.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance -``` +{{< bs-table >}} +| Method | Description | +| --- | --- | +| `dispose` | Destroys an element's tab. | +| `getInstance` | Static method which allows you to get the tab instance associated with a DOM element, you can use it like this: `bootstrap.Tab.getInstance(element)`. | +| `getOrCreateInstance` | Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Tab.getOrCreateInstance(element)`. | +| `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.bs.tab` event occurs). | +{{< /bs-table >}} ### Events @@ -508,7 +472,7 @@ When showing a new tab, the events fire in the following order: 3. `hidden.bs.tab` (on the previous active tab, the same one as for the `hide.bs.tab` event) 4. `shown.bs.tab` (on the newly-active just-shown tab, the same one as for the `show.bs.tab` event) -If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will not be fired. +If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired. {{< bs-table >}} | Event type | Description | diff --git a/site/content/docs/5.2/components/navs-tabs.md b/site/content/docs/5.2/components/navs-tabs.md index 69ab7e5f3bf2..1748dd1bbca0 100644 --- a/site/content/docs/5.2/components/navs-tabs.md +++ b/site/content/docs/5.2/components/navs-tabs.md @@ -625,71 +625,22 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a {{< partial "callout-danger-async-methods.md" >}} {{< /callout >}} -#### constructor +Activates your content as a tab element. -Activates a tab element and content container. Tab should have either a `data-bs-target` or, if using a link, an `href` attribute, targeting a container node in the DOM. - -```html - - -
-
...
-
...
-
...
-
...
-
- - -``` - -#### 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.bs.tab` event occurs). +You can create a tab instance with the constructor, for example: ```js -const someTabTriggerEl = document.querySelector('#someTabTrigger') -const tab = new bootstrap.Tab(someTabTriggerEl) - -tab.show() +const bsTab = new bootstrap.Tab('#myTab') ``` -#### dispose - -Destroys an element's tab. - -#### getInstance - -*Static* method which allows you to get the tab instance associated with a DOM element. - -```js -const tab = bootstrap.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance -``` - -#### 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. - -```js -const tab = bootstrap.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance -``` +{{< bs-table >}} +| Method | Description | +| --- | --- | +| `dispose` | Destroys an element's tab. | +| `getInstance` | Static method which allows you to get the tab instance associated with a DOM element, you can use it like this: `bootstrap.Tab.getInstance(element)`. | +| `getOrCreateInstance` | Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Tab.getOrCreateInstance(element)`. | +| `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.bs.tab` event occurs). | +{{< /bs-table >}} ### Events