Блог

У меня есть 5 кругов, расположенных следующим образом

Я хочу добавить небольшую «подпись» под каждым кругом следующим образом

Для кругов я использую v-avatar компонент в Vuetify, но я действительно не знаю, как добавить подписи таким образом, чтобы это выглядело как предыдущее изображение. Это код, который у меня есть на данный момент:

 new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
    }
  },
})  

 .dark-grey-text {
    color: #707070 !important;
}

.pf-text{
    font-family: 'Alata', sans-serif;
}  

 <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alataamp;display=swap" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
<v-app>
  <v-container>
    <h3 class="dark-grey-text pf-text text-center mt-2">INTENSITY</h3>
      <v-row class="mx-2 mt-2">
        <div class="mx-auto">
          <v-avatar color="#877787" size="25"></v-avatar>
          <v-avatar color="#B28C81" class="ml-4" size="25"></v-avatar>
          <v-avatar color="#E5DB9C" class="ml-4" size="25"></v-avatar>
          <v-avatar color="#CE7E7E" class="ml-4" size="25"></v-avatar>
          <v-avatar color="#707070" class="ml-4" size="25"></v-avatar>
        </div>
      </v-row>
  </v-container>
</v-app>
</div>  

Вы можете перенести <v-avatar/> в div, который имеет гибкий столбец. Затем примените display: flex и flex-direction: row к div, который их оборачивает.

 <v-row ...>

  <div class="mx-auto d-flex flex-row">
    <div class="d-flex flex-column text-center">
      <v-avatar color="#877787" size="25"/>
      <span class="caption grey--text">P</span>
    </div>
    <div class="d-flex flex-column text-center ml-4">
      <v-avatar color="#B28C81" size="25"/>
      <span class="caption grey--text">edP</span>
    </div>
    <div class="d-flex flex-column text-center ml-4">
      <v-avatar color="#E5DB9C" size="25"/>
      <span class="caption grey--text">edT</span>
    </div>
    <div class="d-flex flex-column text-center ml-4">
      <v-avatar color="#CE7E7E" size="25"/>
      <span class="caption grey--text">edC</span>
    </div>
    <div class="d-flex flex-column text-center ml-4">
      <v-avatar color="#707070" size="25"/>
      <span class="caption grey--text">EdS</span>
    </div>
  </div>

</v-row>
  

Вот демонстрационный код.