mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 15:50:01 +02:00
Code Issues Releases Wiki Activity

Set up a resuming table such as what's in other components.

Browse Source
This commit is contained in:
louismaximepiton
2022-09-02 15:44:07 +02:00
committed by Mark Otto
parent 337068f8b1
commit a329575d82
2 changed files with 26 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
site/content/docs/5.2/components/navs-tabs.md
View File

@@ -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
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>
<script>
const firstTabEl = document.querySelector('#myTab li:last-child button')
const firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
```
#### 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