Как настроить классы для компонента Tab библиотеки Vue. js uiv?

Question

Мы используем библиотеку uiv в нашем проекте. У нас есть вкладки, и я хотел бы настроить их интерфейс. Документация гласит:

https://uiv.wxsm.space/tabs#tab

Я не уверен, как использовать API-интерфейс Tab, например, чтобы при некоторых обстоятельствах иметь разные цвета для разных вкладок.

Я пробовал просто так:

<tab
  v-for="(sectionDescription) in tabbedSectionDescriptions"
  :key="sectionDescription.key"
  :title="sectionDescription.displayName"
  :tab-classes="{ 'paint-tab': true }"
>

<style lang="stylus" scoped>
>>> .nav-tabs
  .paint-tab
    a
      color red
</style>

Но все заголовки вкладок закрашены красным, а это не то поведение, которое мне нужно.

Answer 1

Вы должны определить функцию, которая возвращает объект класса certian для определенной вкладки: в шаблоне:

:tab-classes="getTabColorClass(sectionDescription)"

в коде:

methods: {
  getTabColorClass(sectionDescription) {
     switch (sectionDescription.key) {
       'key1': 
          return {
           'paint-tab': true 
          }
       'key2': 
         return {
           'paint-tab2': true 
         }
       default:
         return null
     }
  }
}

в стиле:

>>> .nav-tabs
  .paint-tab
    a
      color red
  .paint-tab2
    a
      color green