mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-26 23:54:23 +01:00
Set up a resuming table such as what's in other components.
This commit is contained in:
louismaximepiton
Mark Otto
parent
337068f8b1
commit
a329575d82
@ -442,62 +442,26 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane
|
|||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
|
|
||||||
#### constructor
|
{{< callout danger >}}
|
||||||
|
{{< partial "callout-danger-async-methods.md" >}}
|
||||||
|
{{< /callout >}}
|
||||||
|
|
||||||
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.
|
Activates your content as a tab element.
|
||||||
|
|
||||||
```html
|
You can create a tab instance with the constructor, for example:
|
||||||
<div class="list-group" id="myList" role="tablist">
|
|
||||||
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
|
|
||||||
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
|
|
||||||
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
|
|
||||||
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tab-content">
|
|
||||||
<div class="tab-pane active" id="home" role="tabpanel">...</div>
|
|
||||||
<div class="tab-pane" id="profile" role="tabpanel">...</div>
|
|
||||||
<div class="tab-pane" id="messages" role="tabpanel">...</div>
|
|
||||||
<div class="tab-pane" id="settings" role="tabpanel">...</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const firstTabEl = document.querySelector('#myTab a:last-child')
|
|
||||||
const firstTab = new bootstrap.Tab(firstTabEl)
|
|
||||||
|
|
||||||
firstTab.show()
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 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
|
```js
|
||||||
const tab = new bootstrap.Tab('#someListItem')
|
const bsTab = new bootstrap.Tab('#myTab')
|
||||||
|
|
||||||
tab.show()
|
|
||||||
```
|
```
|
||||||
|
|
||||||
#### dispose
|
{{< bs-table >}}
|
||||||
|
| Method | Description |
|
||||||
Destroys an element's tab.
|
| --- | --- |
|
||||||
|
| `dispose` | Destroys an element's tab. |
|
||||||
#### getInstance
|
| `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)`. |
|
||||||
*Static* method which allows you to get the tab instance associated with a DOM 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 >}}
|
||||||
```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
|
### 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)
|
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)
|
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 >}}
|
{{< bs-table >}}
|
||||||
| Event type | Description |
|
| Event type | Description |
|
||||||
|
|||||||
@ -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" >}}
|
{{< partial "callout-danger-async-methods.md" >}}
|
||||||
{{< /callout >}}
|
{{< /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.
|
You can create a tab instance with the constructor, for example:
|
||||||
|
|
||||||
```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
|
```js
|
||||||
const someTabTriggerEl = document.querySelector('#someTabTrigger')
|
const bsTab = new bootstrap.Tab('#myTab')
|
||||||
const tab = new bootstrap.Tab(someTabTriggerEl)
|
|
||||||
|
|
||||||
tab.show()
|
|
||||||
```
|
```
|
||||||
|
|
||||||
#### dispose
|
{{< bs-table >}}
|
||||||
|
| Method | Description |
|
||||||
Destroys an element's tab.
|
| --- | --- |
|
||||||
|
| `dispose` | Destroys an element's tab. |
|
||||||
#### getInstance
|
| `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)`. |
|
||||||
*Static* method which allows you to get the tab instance associated with a DOM 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 >}}
|
||||||
```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
|
### Events
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user