Caja de texto, app tipo chat en Electron.js 10

- Andrés Cruz

In english
Caja de texto, app tipo chat en Electron.js 10

Anteriormente creamos el listado de mensajes para la aplicacion, ahora vamos a crear la caja de texto, que es, donde colocaremos los mensajes, estará compuesta de dos columnas, una de ellas de tamaño automático para que ocupe solamente el tamaño necesario; en el de tamaño fijo, colocamos el TEXTAREA con el redondeado en las esquinas:

<div class="col-8" id="right">
    *** CHATS
    <form action="" class="form-message">
        <div class="row">
            <div class="col">
                <textarea  class="form-control rounded-pill"></textarea>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary rounded-circle send-button">
                    <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z" />
                        </svg>
                        
                </button>
            </div>
        </div>
    </form>
</div>

Y usaremos el siguiente CSS:

css/style.css

.form-message{
    margin-top: 15px;
}

.form-message button.send-button svg {
    width: 40px;
    height: 40px;
}
.form-message textarea{
   overflow: hidden;
   resize: none;
}

Y tendremos:

chat box
chat box

El siguiente paso a realizar es, crear un listado genérico para pasar del proceso principal a la página web

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.