feat(ng-bootstrap): ngb-tabset deleted

Orange-OpenSource · Nov 20, 2020 · 18b62c0 · 18b62c0
1 parent ef188e9
commit 18b62c0
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 44 deletions.
diff --git a/src/app/demos/tabs.component.html b/src/app/demos/tabs.component.html
@@ -1,5 +1,4 @@
-<h6>Tabs</h6>
-<ngb-tabset>
+<!-- <ngb-tabset>
     <ngb-tab title="Home">
         <ng-template ngbTabContent>
         <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
@@ -21,9 +20,8 @@ <h6>Tabs</h6>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque. </p>
         </ng-template>
     </ngb-tab>
-</ngb-tabset>
+</ngb-tabset> -->
 
-<hr>
 <h6>Base nav</h6>
 
 <ul class="nav">
@@ -39,4 +37,57 @@ <h6>Base nav</h6>
   <li class="nav-item">
     <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
   </li>
-</ul>
+</ul>
+
+<hr>
+
+<h6>Vertical nav</h6>
+
+<ul class="nav flex-column">
+  <li class="nav-item">
+    <a class="nav-link active" href="#" aria-current="page">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+
+<hr>
+
+<h6>Tabs</h6>
+
+<ul class="nav nav-tabs" id="myTab" role="tablist">
+  <li class="nav-item" role="presentation">
+    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
+  </li>
+  <li class="nav-item" role="presentation">
+    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
+  </li>
+  <li class="nav-item" role="presentation">
+    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
+  </li>
+</ul>
+<div class="tab-content" id="myTabContent">
+  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+    <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
+      master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
+      dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
+      iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
+  </div>
+  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit,
+    blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress,
+    commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
+    assumenda labore aesthetic magna delectus mollit.</p>
+  </div>
+  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque. </p>
+  </div>
+</div>
+
diff --git a/src/app/docs-menu/docs-menu.component.html b/src/app/docs-menu/docs-menu.component.html
@@ -35,7 +35,7 @@
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/spinners">Spinners</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/stepbar">Stepbar</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/table">Table</a></li>
-                        <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/tabs">Tabset</a></li>
+                        <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/tabs">Tabs</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/timepicker">Timepicker</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/toast">Toast</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/tooltip">Tooltip</a></li>

diff --git a/src/app/docs/code-box.component.ts b/src/app/docs/code-box.component.ts
@@ -17,39 +17,54 @@ import { Component, Input } from '@angular/core';
     `],
     template: `
         <h3 >Source</h3>
-        <ngb-tabset class="code-box">
-
-            <ngb-tab title="HTML" *ngIf="snippets.markup">
-                <ng-template ngbTabContent>
-                    <pre class="language-html"><code class="language-html" [innerHTML]="snippets.markup"></code></pre>
-                </ng-template>
-            </ngb-tab>
-
-            <ngb-tab title="TypeScript" *ngIf="snippets.typescript">
-                <ng-template ngbTabContent>
-                    <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets.typescript"></code></pre>
-                </ng-template>
-            </ngb-tab>
-
-            <ngb-tab title="CSS" *ngIf="snippets.css">
-                <ng-template ngbTabContent>
-                    <pre class="language-css"><code class="language-css" [innerHTML]="snippets.css"></code></pre>
-                </ng-template>
-            </ngb-tab>
-
-            <ngb-tab title="Service" *ngIf="snippets.service">
-                <ng-template ngbTabContent>
-                    <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets.service"></code></pre>
-                </ng-template>
-            </ngb-tab>
-
-            <ngb-tab title="Container" *ngIf="snippets.container">
-                <ng-template ngbTabContent>
-                    <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets.container"></code></pre>
-                </ng-template>
-            </ngb-tab>
-
-        </ngb-tabset>
+        
+        <ul class="nav nav-tabs" id="myTab" role="tablist">
+            <li class="nav-item" role="presentation" *ngIf="snippets.markup">
+                <a class="nav-link active" id="HTML-tab" data-toggle="tab" href="#HTML" role="tab" aria-controls="HTML" aria-selected="true">HTML</a>
+            </li>
+
+            <li class="nav-item" role="presentation" *ngIf="snippets.typescript">
+                <a class="nav-link" id="TypeScript-tab" data-toggle="tab" href="#TypeScript" role="tab" aria-controls="TypeScript" aria-selected="false">TypeScript</a>
+            </li>
+
+            <li class="nav-item" role="presentation" *ngIf="snippets.css">
+                <a class="nav-link" id="CSS-tab" data-toggle="tab" href="#CSS" role="tab" aria-controls="CSS" aria-selected="false">CSS</a>
+            </li>
+
+            <li class="nav-item" role="presentation" *ngIf="snippets.service">
+                <a class="nav-link" id="Service-tab" data-toggle="tab" href="#Service" role="tab" aria-controls="Service" aria-selected="false">Service</a>
+            </li>
+
+            <li class="nav-item" role="presentation" *ngIf="snippets.container">
+                <a class="nav-link" id="Container-tab" data-toggle="tab" href="#Container" role="tab" aria-controls="Container" aria-selected="false">Container</a>
+            </li>
+
+        </ul>
+
+        <div class="tab-content" id="myTabContent">
+            <div class="tab-pane fade show active" id="HTML" role="tabpanel" aria-labelledby="HTML-tab">
+                <pre class="language-html"><code class="language-html" [innerHTML]="snippets.markup"></code></pre>
+            </div>
+
+            <div class="tab-pane fade" id="TypeScript" role="tabpanel" aria-labelledby="TypeScript-tab">
+                <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets.typescript"></code></pre>
+            </div>
+
+            <div class="tab-pane fade" id="CSS" role="tabpanel" aria-labelledby="CSS-tab">
+                <pre class="language-css"><code class="language-css" [innerHTML]="snippets.css"></code></pre>
+            </div>
+
+            <div class="tab-pane fade" id="Service" role="tabpanel" aria-labelledby="Service-tab">
+                <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets.service"></code></pre>
+            </div>
+
+            <div class="tab-pane fade" id="Container" role="tabpanel" aria-labelledby="Container-tab">
+                <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets.container"></code></pre>
+            </div>
+
+        </div>
+
+
     `
 })
 export class CodeBoxComponent {

diff --git a/src/app/docs/tabs.component.ts b/src/app/docs/tabs.component.ts
@@ -4,11 +4,14 @@ import { Component } from '@angular/core';
   selector: 'doc-tabs',
   template: `
     <docs-wrapper component="Tabs">
-    <p class="mt-4">Check the <a target="_blank" rel="noopener noreferrer"
-    href="https://ng-bootstrap.github.io/#/components/tabset/examples">ng-bootstrap's original component documentation</a>.</p>
-        <h3>Demo</h3>
-        <demo-tabs></demo-tabs>
-        <code-box [snippets]="demoSnippets"></code-box>
+      <p class="mt-4">Check the <a target="_blank" rel="noopener noreferrer"
+      href="https://boosted.orange.com/docs/4.5/components/nav">Boosted  original component documentation</a>.</p>
+      <p class="h6 text-primary">Warning ! : ngb-tabset no longer supported, available under version 7.1.1. Please use Nav.</p>
+      <p class="mt-4">Check the <a target="_blank" rel="noopener noreferrer"
+      href="https://ng-bootstrap.github.io/#/components/tabset">ngb-tabset</a>.</p>
+      <h3>Demo</h3>
+      <demo-tabs></demo-tabs>
+      <code-box [snippets]="demoSnippets"></code-box>
     </docs-wrapper>
   `
 })