0

Previously I was using TabLink component of clarity-angular to create tabs. Now, after i upgraded to @clr/angular i'm not able to use TabLink so i'm unable to create tabs inside a tab. How do I proceed?

Rishav
  • 3,818
  • 1
  • 31
  • 49
Nithin Karthik
  • 17
  • 3
  • Have you reviewed https://vmware.github.io/clarity/documentation/v0.11/tabs? If not, please share some sample code to demonstrate your approach. – Jeremy Wilken Mar 12 '18 at 15:55

1 Answers1

5

This should work, I just copied our example code in the docs for the Simple Tabs example and nested it inside of tab 2. See this stackblitz for functional code. 

        <clr-tabs>
          <clr-tab>
              <button clrTabLink id="link1">Tab1</button>
              <clr-tab-content id="content1" *clrIfActive>
              tab 1
              </clr-tab-content>
          </clr-tab>
          <clr-tab>
              <button clrTabLink>Tab2</button>
              <clr-tab-content *clrIfActive="true">
              tab2
                <clr-tabs>
                  <clr-tab>
                      <button clrTabLink id="link1">Tab1</button>
                      <clr-tab-content id="content1" *clrIfActive>
                      tab 2.1
                      </clr-tab-content>
                  </clr-tab>
                  <clr-tab>
                      <button clrTabLink>Tab2</button>
                      <clr-tab-content *clrIfActive="true">
                      tab 2.2
                      </clr-tab-content>
                  </clr-tab>
              </clr-tabs>
              </clr-tab-content>
          </clr-tab>
      </clr-tabs>
hippeelee
  • 1,788
  • 1
  • 10
  • 21