diff options
author | XhmikosR <xhmikosr@gmail.com> | 2020-10-19 12:56:49 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-10-19 12:56:49 +0300 |
commit | e6618a6ebbf299c013605313b67f4699c24fee3d (patch) | |
tree | ebe42fb8d7f784bb116f413a5a1baa0d765e8f4c /site/content/docs/5.0/components/list-group.md | |
parent | 48177c946fea3e78dc2c9a8b6a9c74372b3fa1fe (diff) |
docs: switch to fenced codeblocks (#31806)
Diffstat (limited to 'site/content/docs/5.0/components/list-group.md')
-rw-r--r-- | site/content/docs/5.0/components/list-group.md | 36 |
1 files changed, 18 insertions, 18 deletions
diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index a82bdddf79..fa576cd661 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -288,7 +288,7 @@ Use the tab JavaScript plugin—include it individually or through the compiled </div> </div> -{{< highlight html >}} +```html <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> @@ -307,14 +307,14 @@ Use the tab JavaScript plugin—include it individually or through the compiled </div> </div> </div> -{{< /highlight >}} +``` ### Using data attributes You can activate a list group navigation without writing any JavaScript by simply specifying `data-toggle="list"` or on an element. Use these data attributes on `.list-group-item`. <div role="tabpanel"> -{{< highlight html >}} +```html <!-- List group --> <div class="list-group" id="myList" role="tablist"> <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a> @@ -330,14 +330,14 @@ You can activate a list group navigation without writing any JavaScript by simpl <div class="tab-pane" id="messages" role="tabpanel">...</div> <div class="tab-pane" id="settings" role="tabpanel">...</div> </div> -{{< /highlight >}} +``` </div> ### Via JavaScript Enable tabbable list item via JavaScript (each list item needs to be activated individually): -{{< highlight js >}} +```js var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a')) triggerTabList.forEach(function (triggerEl) { var tabTrigger = new bootstrap.Tab(triggerEl) @@ -347,30 +347,30 @@ triggerTabList.forEach(function (triggerEl) { tabTrigger.show() }) }) -{{< /highlight >}} +``` You can activate individual list item in several ways: -{{< highlight js >}} +```js var triggerEl = document.querySelector('#myTab a[href="#profile"]') bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name var triggerFirstTabEl = document.querySelector('#myTab li:first-child a') bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab -{{< /highlight >}} +``` ### Fade effect To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible. -{{< highlight html >}} +```html <div class="tab-content"> <div class="tab-pane fade show active" id="home" role="tabpanel">...</div> <div class="tab-pane fade" id="profile" role="tabpanel">...</div> <div class="tab-pane fade" id="messages" role="tabpanel">...</div> <div class="tab-pane fade" id="settings" role="tabpanel">...</div> </div> -{{< /highlight >}} +``` ### Methods @@ -378,7 +378,7 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane Activates a list item element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM. -{{< highlight html >}} +```html <div class="list-group" id="myList" role="tablist"> <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a> @@ -399,18 +399,18 @@ Activates a list item element and content container. Tab should have either a `d firstTab.show() </script> -{{< /highlight >}} +``` #### 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). -{{< highlight js >}} +```js var someListItemEl = document.querySelector('#someListItem') var tab = new bootstrap.Tab(someListItemEl) tab.show() -{{< /highlight >}} +``` #### dispose @@ -420,10 +420,10 @@ Destroys an element's tab. *Static* method which allows you to get the tab instance associated with a DOM element -{{< highlight js >}} +```js var triggerEl = document.querySelector('#trigger') var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance -{{< /highlight >}} +``` ### Events @@ -463,10 +463,10 @@ If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will </tbody> </table> -{{< highlight js >}} +```js var tabEl = document.querySelector('a[data-toggle="list"]') tabEl.addEventListener('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab }) -{{< /highlight >}} +``` |