fix(tabs): tempfix for active tabs with cNavLink

umayanrmr · Sep 2, 2022 · 8068267 · 8068267
1 parent 470cdc1
commit 8068267
Showing 1 changed file with 10 additions and 10 deletions.
diff --git a/src/app/views/base/tabs/tabs.component.html b/src/app/views/base/tabs/tabs.component.html
@@ -10,25 +10,25 @@
  <c-card-body>
  <c-nav variant="tabs">
  <c-nav-item>
- <a [active]="true" [cTabContent]="tabContent1" routerLink="./" [tabPaneIdx]="0" cNavLink>
+ <a [cTabContent]="tabContent1" [routerLink] [tabPaneIdx]="0" cNavLink>
  <svg cIcon class="me-2" name="cilHome"></svg>
  Home
  </a>
  </c-nav-item>
  <c-nav-item>
- <a [cTabContent]="tabContent1" routerLink="./" [tabPaneIdx]="1" cNavLink>
+ <a [cTabContent]="tabContent1" [routerLink] [tabPaneIdx]="1" cNavLink>
  <svg cIcon class="me-2" name="cilUser"></svg>
  Profile
  </a>
  </c-nav-item>
  <c-nav-item>
- <a [cTabContent]="tabContent1" routerLink="./" [tabPaneIdx]="2" cNavLink>
+ <a [cTabContent]="tabContent1" [routerLink] [tabPaneIdx]="2" cNavLink>
  <svg cIcon class="me-2" name="cilCode"></svg>
  Contact
  </a>
  </c-nav-item>
  </c-nav>
- <c-tab-content #tabContent1="cTabContent" [activeTabPaneIdx]="1" cRounded="bottom">
+ <c-tab-content #tabContent1="cTabContent" [activeTabPaneIdx]="0" cRounded="bottom">
  <c-tab-pane class="p-3 preview" role="tabpanel">
  This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
  will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
@@ -55,14 +55,14 @@
  <c-card-body>
  <c-nav variant="tabs">
  <c-nav-item *ngFor="let nav of panes; index as i; first as isFirst; last as isLast">
- <a [active]="isFirst" [cTabContent]="tabContent2" [disabled]="isLast" routerLink="./" [tabPaneIdx]="i"
+ <a [cTabContent]="tabContent2" [disabled]="isLast" [routerLink] [tabPaneIdx]="i"
  cNavLink>
  <svg cIcon class="me-2" name="cilHome"></svg>
  {{nav.name}}
  </a>
  </c-nav-item>
  </c-nav>
- <c-tab-content #tabContent2="cTabContent" [activeTabPaneIdx]="1" cRounded="bottom">
+ <c-tab-content #tabContent2="cTabContent" [activeTabPaneIdx]="0" cRounded="bottom">
  <c-tab-pane *ngFor="let pane of panes; index as i;" class="p-3 preview">
  This is some placeholder content the <strong>{{pane.name}}</strong> tab's associated content. Clicking
  another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
@@ -81,25 +81,25 @@
  <c-card-body>
  <c-nav variant="pills">
  <c-nav-item>
- <a [cTabContent]="tabContent3" routerLink="./" [tabPaneIdx]="0" cNavLink>
+ <a [cTabContent]="tabContent3" [routerLink] [tabPaneIdx]="0" cNavLink>
  <svg cIcon class="me-2" name="cilHome"></svg>
  Home
  </a>
  </c-nav-item>
  <c-nav-item>
- <a [cTabContent]="tabContent3" routerLink="./" [tabPaneIdx]="1" cNavLink>
+ <a [cTabContent]="tabContent3" [routerLink] [tabPaneIdx]="1" cNavLink>
  <svg cIcon class="me-2" name="cilUser"></svg>
  Profile
  </a>
  </c-nav-item>
  <c-nav-item>
- <a [active]="true" [cTabContent]="tabContent3" routerLink="./" [tabPaneIdx]="2" cNavLink>
+ <a [cTabContent]="tabContent3" [routerLink] [tabPaneIdx]="2" cNavLink>
  <svg cIcon class="me-2" name="cilCode"></svg>
  Contact
  </a>
  </c-nav-item>
  </c-nav>
- <c-tab-content #tabContent3="cTabContent" cRounded="bottom">
+ <c-tab-content #tabContent3="cTabContent" cRounded="bottom" [activeTabPaneIdx]="0">
  <c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" role="tabpanel">
  This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
  will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the