Crear un listado de chats con Electron.js y Bootstrap 5 9

- Andrés Cruz

In english
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:

mensajes
mensajes

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

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.