时间戳

首页 > 解决方案 > 使用 vuetify 制作线程？

css - 使用 vuetify 制作线程？

问题描述

我正在尝试使用 Vuetify 制作一个从头像延伸到头像的头像线程。我已经做了一个工作示例，说明我在这里仅使用 vanilla CSS 和 flexbox 来完成的工作。我想要做的是将我的香草示例移植到 vuetify 中：

在此处输入图像描述

验证卡

<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto mt-10"
      width="344"
      outlined
    >
      <v-list class="d-flex">
        
        <v-list-item-avatar class="align-self-start">
          <img src="https://i.pravatar.cc/32" alt="John">
          <div class="threadline"></div>
        </v-list-item-avatar>

        <v-list-item-content >
          <div class="questrial font-weight-bold" style="font-size: 14px">Daniel Frazier <span class="font-weight-medium grey--text">17 hrs ago</span></div>
          
          <p>
            Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
          </p>
        </v-list-item-content>
        
      </v-list>

       <div class="comment-buttons">
        <span>Reply to thread</span>
        <span>View/add details</span>
      </div>
      
    </v-card>
  </v-app>
</div>

上面的特定 Vuetify 代码

<v-list-item-avatar class="align-self-start">
   <img src="https://i.pravatar.cc/32" alt="John">
   <div class="threadline"></div>
</v-list-item-avatar>

CSS

.threadline{
  width: 2px;
  height: 100%;
  background-color: #E5E5E5;
}

Threadline 使用 vanilla CSS 和 flexbox

<div class="avatar">
    <img class="circle" src="https://i.pravatar.cc/32">
    <div class="threadline"></div>
</div>

.avatar {
  flex: 1;
  padding: 10px 10px 0 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.circle {
  border-radius: 30px;
  margin-bottom: 10px;
}
.threadline{
  width: 2px;
  height: 100%;
  background-color: #E5E5E5;
}

在我的 Vuetify codepen中，线程在头像旁边对齐。我想让它像图片和我的香草 CSS 一样对齐。

标签： cssflexboxvuetify.js

解决方案

推荐阅读