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:
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
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter