Как создать вкладки внутри вкладки с помощью четкого дизайна

Раньше для создания вкладок я использовал TabLink компонент clearity-angular. Теперь, после того как я обновился до @clr/angular, я не могу использовать TabLink, поэтому я не могу создавать вкладки внутри вкладки. Как мне продолжить?


vmware-clarity
person Nithin Karthik    schedule 12.03.2018    source источник
comment
Вы просмотрели vmware.github.io/clarity/documentation/v0.11/tabs?? Если нет, поделитесь образцом кода, чтобы продемонстрировать свой подход.   -  person Jeremy Wilken    schedule 12.03.2018

Ответы (1)


arrow_upward
5
arrow_downward

Это должно сработать, я просто скопировал наш пример кода в документацию для Пример простых вкладок и вложил его во вкладку 2. См. этот stackblitz для функционального кода.

        <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>
person hippeelee    schedule 13.03.2018