изменение шрифта заголовка панели расширения Vuetify на полужирный в фокусе - PullRequest
Новая
       5

изменение шрифта заголовка панели расширения Vuetify на полужирный в фокусе

0 голосов
/ 07 мая 2020

Я хотел бы изменить обычный стиль шрифта заголовка панели расширения на font-bold, когда он находится в фокусе ... Я не могу найти ничего полезного в документации. Я, вероятно, что-то упустил ... Пожалуйста, дайте мне представление ... заранее спасибо ...

Посмотрите на пример ниже: 

<v-expansion-panels accordion>
  <v-expansion-panel
    v-for="(item,i) in 5"
    :key="i"
  >

    ***<v-expansion-panel-header>Item</v-expansion-panel-header>***

    <v-expansion-panel-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

эта строка Item менять шрифт, только если он в фокусе или открыт

любая помощь приветствуется ...

1 Ответ

0 голосов
/ 07 мая 2020

На панели расширения у вас есть v-модель, которая синхронизирует индекс всех открытых панелей. Вы можете использовать это, чтобы проверить, открыты ли текущие панели или нет, а затем применить класс. 

<v-expansion-panels
  v-model="panel" //Added v-model here
  multiple
  >
  <v-expansion-panel
    v-for="(item,i) in items"
    :key="i"
    >
    <v-expansion-panel-header 
      :class="panel.indexOf(i) != -1 ? 'font-weight-bold': ''" //Applying class here.
    >
      Header {{ item }}
    </v-expansion-panel-header>
    <v-expansion-panel-content>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>
...