diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.2/components/navs-tabs.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.2/components/navs-tabs.md | 71 |
1 files changed, 60 insertions, 11 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/navs-tabs.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/navs-tabs.md index 1748dd1bb..2b58bdd72 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/navs-tabs.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/navs-tabs.md @@ -625,22 +625,71 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a {{< partial "callout-danger-async-methods.md" >}} {{< /callout >}} -Activates your content as a tab element. +#### constructor -You can create a tab instance with the constructor, for example: +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). ```js -const bsTab = new bootstrap.Tab('#myTab') +const someTabTriggerEl = document.querySelector('#someTabTrigger') +const tab = new bootstrap.Tab(someTabTriggerEl) + +tab.show() ``` -{{< 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 >}} +#### 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 +``` ### Events |