Crear un listado de chats con Electron.js y Bootstrap 5 9
En este apartado, vamos a crear un listado de mensajes o chats, el cual, será una estructura similares a la de listado de contactos construida en la anterior entrada:
<div class="col-8" id="right">
<div class="d-flex chat">
<div class="w-25 d-flex align-items-end justify-content-end">
<img class="rounded-pill me-3 avatar" width="60"
src="https://randomuser.me/api/portraits/men/17.jpg">
</div>
<div class="w-75">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit
voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque?
Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?
</div>
</div>
<p class="small text-muted">8:45 PM</p>
</div>
</div>
<div class="d-flex chat">
<div class="w-75 ">
<div class="card bg-dark">
<div class="card-body text-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit
voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque?
Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?
</div>
</div>
<p class="small text-muted float-end">9:17 AM</p>
</div>
<div class="w-25 d-flex align-items-end">
<img class="rounded-pill ms-3 avatar" src="https://randomuser.me/api/portraits/men/19.jpg">
</div>
</div>
</div>Y usaremos el siguiente CSS:
css/style.css
#right {
background-color: #333;
***
}
.chat {
margin-top: 8px;
}
.chat img.avatar {
width: 50px;
height: 50px;
}Con esto, quedará de la siguiente manera:
Lo siguiente que vamos a crear, es un listado de chats.
Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter