Я создаю макет чата в Vuetify (Vue. js Material Design Framework). Как разработчик, я предпочитаю, чтобы мой пользовательский css был как можно меньше и использовать столько, сколько может предложить фреймворк. Но не имея solid понимания Flexbox, я испытываю трудности с завершением макета чата, который мне нужен.
Я борюсь с тем, чтобы:
- название v-карты (справа) должен придерживаться верхней части окна.
- поле type_a_message должно придерживаться нижней части окна.
- средняя область (пузырьки сообщений) прокручивается в оставшемся пространстве.
- боковая панель (список пользователей) не должна уменьшаться, тогда как правая сторона должна быть расширена / уменьшена.
Мой шаблон выглядит так (извиняюсь за многословие)
<v-container
class="fill-height pa-0 elevation-4"
>
<v-row class="no-gutters">
<v-col
cols="3"
class="flex-grow-1 flex-shrink-0"
style="border-right: 1px solid #0000001f;"
>
<v-responsive
class="overflow-y-auto fill-height"
height="500"
>
<v-list subheader>
<v-list-item-group v-model="activeChat">
<template v-for="(item, index) in parents">
<v-list-item
:key="`parent${index}`"
:value="item.id"
>
<v-list-item-avatar color="grey lighten-1 white--text">
<v-icon>
chat_bubble
</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title" />
<v-list-item-subtitle v-text="'hi'" />
</v-list-item-content>
<v-list-item-icon>
<v-icon :color="item.active ? 'deep-purple accent-4' : 'grey'">
chat_bubble
</v-icon>
</v-list-item-icon>
</v-list-item>
<v-divider
:key="`chatDivider${index}`"
class="my-0"
/>
</template>
</v-list-item-group>
</v-list>
</v-responsive>
</v-col>
<v-col
cols="3"
style="max-width: 100%;"
class="flex-grow-1 flex-shrink-0"
>
<v-responsive
v-if="activeChat"
class="overflow-y-auto fill-height"
height="500"
>
<v-card
flat
class="fill-height"
>
<v-card-title>
john doe
</v-card-title>
<v-card-subtitle>
hi
</v-card-subtitle>
<v-divider class="my-0" />
<v-card-text class="flex-grow-1 fill-height">
<template v-for="(msg, i) in messages">
<div
:class="{ 'd-flex flex-row-reverse': msg.me }"
>
<v-menu offset-y>
<template v-slot:activator="{ on }">
<v-hover
v-slot:default="{ hover }"
>
<v-chip
:color="msg.me ? 'primary' : ''"
dark
style="height:auto;white-space: normal;"
class="pa-4 mb-2"
v-on="on"
>
{{ msg.content }}
<sub
class="ml-2"
style="font-size: 0.5rem;"
>{{ msg.created_at }}</sub>
<v-icon
v-if="hover"
small
>
expand_more
</v-icon>
</v-chip>
</v-hover>
</template>
<v-list>
<v-list-item>
<v-list-item-title>delete</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<v-text-field
v-model="messageForm.content"
label="type_a_message"
type="text"
no-details
outlined
append-outer-icon="send"
@keyup.enter="messages.push(messageForm)"
@click:append-outer="messages.push(messageForm)"
/>
</v-card-text>
</v-card>
</v-responsive>
</v-col>
</v-row>
</v-container>