Notes
El note_widget es un componente que se utiliza para mostrar una nota o feedback que se pueda entregar a los colaboradores.
Playground
- Ruby
- Html
<%= note_widget do |n| %>
<% n.note message: 'Vivamus ultricies nisl id diam vulputate blandit. Fusce fringilla tempus est,
a lobortis felis lacinia sit amet. Suspendisse potenti. Donec condimentu Vivamus ultricies nisl id diam vulputate blandit.
Fusce fringilla tempus est, a lobortis felis lacinia sit amet. Suspendisse potenti.
Donec condimentu. Vivamus ultricies nisl id diam vulputate blandit. Fusce fringilla tempus est, a lobortis felis lacinia sit amet. Suspendisse potenti.
Donec condimentu. Vivamus ultricies nisl id diam vulputate blandit,
a lobortis felis lacinia sit amet. Suspendisse potenti. Donec condimentu Vivamus ultricies nisl id diam vulputate blandit.
Fusce fringilla tempus est, a lobortis felis lacinia sit amet. Suspendisse potenti',
author_name: 'Prueba embedded',
is_visible: true,
created_at: Time.strptime("19/12/2023 16:15", "%d/%m/%Y %H:%M"),
name: 'Alexis Jonathan Alvarez Vasquez',
format_date: :simple,
show_more_message: true,
url_picture: 'https://dxcgedrrxtox6.cloudfront.net/images/perfil_hombre.svg' do %>
<% end %>
<% end %>
<div class="note">
<div class="note__container p-2 d-flex">
<div class="flex-column w-100">
<div class="d-flex">
<img
class="direct-chat-img mr-2"
alt="Titulo de prueba video de youtube"
height="40"
width="40"
src="https://dxcgedrrxtox6.cloudfront.net/images/perfil_hombre.svg"
/>
<div class="note__content">
<div class="note__content-title m-0 ">
<div>
<div class="mr-3 mb-0">
Titulo de prueba video de youtube
</div>
</div>
<span class="badge badge-default">Visible</span>
</div>
<span class="note__content-date pb-2"
>Publicado el 10 de noviembre - 02:34 AM por Alexis Jonathan Alvarez Vasquez
</span>
</div>
</div>
<div class="flex-column font-size-14 fw-400 editar-comentario-">
<div
class="user-comment-show-more my-2 content-collapse"
data-show-hide-more-content="true"
data-max-height-collapsed="60"
>
<div
class="user-comment-show-more-content more-content-wrapper"
style="max-height: 60px; overflow: hidden"
>
Fusce fringilla tempus est, a lobortis felis lacinia sit
amet. Suspendisse potenti. Donec condimentum pvamus
ultricies nisl id diam vulputate blandit. Fusce fringilla
tempus est, a lobortis felis lacinia sit amet. Suspendisse
potenti. Donec condimentum pvamus ultricies nisl id diam
vulputate blandit. Fusce fringilla tempus est, a lobortis
felis lacinia sit amet. Suspendisse potenti. a lobortis
felis lacinia sit amet. Suspendisse potenti. a lobortis
felis lacinia sit amet. Suspendisse potenti. Donec
condimentum p
</div>
<a class="toogle-more-link text-primary-500"></a>
</div>
</div>
</div>
</div>
</div>
Lista de parámetro
| Parámetro | Tipo | Detalle |
| person_name | String | Nombre del destinatario de la nota |
| author_name | Block | Nombre del autor en la nota |
| created_at | Date | Fecha de creación |
| is_visible | Boolean | Estado de visibilidad de publicación |
| message | Block | Mensaje |
| tag | String | Etiqueta |
| tag_color | String | Color de la etiqueta, por default es 'info' |
| url_picture | String | URL de la dirección de la foto del destinatario |
| time_ago | String | Tiempo transcurrido desde la fecha |
| time_ago_subtitle | String | Tiempo transcurrido desde la fecha pero posicionada como subtítulo |
| show_more_message | Boolean | Añade un texto 'Ver más' cuando el mensaje sobrepasa 2 líneas |
| name | String | Nombre de la persona que publica "Publicado por x" |
| format_date | Boolean | Formato de la fecha de publicación |
| gallery | String | Agrega un contenedor de galería de video o imagen |
Anatomía
1. Contenedor
Contenedor principal de todos los átomos.
2. Título
Título, puede ser un nombre un texto custom.
3. Subtítulo
Puede ser una fecha de publicación o texto custom.
4. Imagen [opcional]
El componente note puede soportar una imagen a la derecha.
5. Body
Cuerpo de texto custom.
6. Avatar
El componente note puede soportar un avatar.
7. Footer
Puede llevar un footer, soporta componentes de distinto tipo, tales como acciones, chips, rate, entre otros
Casos de uso
El Note es un componente que se utiliza para mostrar una nota o feedback que se pueda entregar a los colaboradores