Todos los componentes (204)

Comentarios

Datos · Comments · .amset-comments

Qué es y cuándo usarlo

Un hilo de comentarios con respuestas anidadas: las preguntas de un producto, las notas de un pedido, la conversación de una incidencia. Cada rama se puede plegar y, con onReply, cada comentario tiene su botón de responder.

Cuándo usarlo

Para preguntas y respuestas públicas en la ficha de un producto, o notas internas que se contestan entre sí.
En cada comentario, badge para marcar al autor («Equipo», «Autor»), photo para su foto y custom para los comentarios de quien mira; las respuestas van en answers.
Con onReply se puede contestar: recibe la clave del comentario y el texto, y es quien lo usa el que añade la respuesta a comments (con withAnswer, que se exporta con él). Sin onReply, el hilo es de solo lectura.
Solo responde: una pregunta nueva de primer nivel lleva su propio TextArea con su botón, encima o debajo del hilo, porque tiene sus reglas (quién puede preguntar, si hay que iniciar sesión).
maxDepth (3 por defecto) es hasta dónde se sangra: las respuestas más hondas siguen anidadas para el lector, pero ya no se meten más a la derecha. empty es lo que se ve sin comentarios.

Cuándo no

Para un chat o un ticket de ida y vuelta, sin ramas: Conversation.
Para opiniones con estrellas: RatingSummary y Rating.
Para un registro de lo que ha pasado: History.

Teclado: Tab recorre los botones «Responder» y los de plegar cada rama; Intro o Espacio los pulsan. Al pulsar «Responder», el campo sale debajo del comentario con el foco dentro; el botón de enviar está apagado mientras el texto esté vacío, y «Cancelar» lo cierra.

Accesibilidad: es una sección con nombre (label) y las respuestas son listas dentro de listas, así que se oye de qué comentario cuelga cada una. Cada «Responder» dice a quién («Responder a Marta Ruiz»), el campo se llama «Tu respuesta a Marta Ruiz» y el botón de plegar dice cuántas respuestas esconde («Ver 3 respuestas») con su aria-expanded. La hora es relativa y lleva la fecha exacta en su datetime. Los avatares son decorativos: el nombre del autor ya va escrito al lado.

Aspecto fino: variables CSS --amset-comments-*: -author, -badge, -bubble, -date, -gap, -indent, -radius, -text. El tamaño mueve el hueco, la sangria de las respuestas y los cuerpos de letra.

Cómo se ve

Ada LovelaceFecha desconocida
La talla M queda algo justa.
1. TiendaFecha desconocida
  Gracias, lo anotamos en la guia.

<Comments
  label="Comentarios"
  comments={[
    { key: '1', author: 'Ada Lovelace', text: 'La talla M queda algo justa.', date: '2 de octubre' },
  ]}
/>

Props

Se importa con import { Comments } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`comments`obligatoria	`readonly Comment[]`	—
`label`obligatoria	`string`	De que es el hilo. Obligatoria: nombra la region.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`empty`	`string`	—
`maxDepth`	`number`	Hasta que nivel se sangra (3 por defecto; 0, nunca). Las respuestas mas hondas siguen anidadas para el lector, pero ya no se meten mas a la derecha.
`onReply`	`(key: string, text: string) => void`	Recibe la clave del comentario al que se responde y el texto. Sin esto no se puede responder: el hilo es de solo lectura. Solo responde: un comentario nuevo de primer nivel no sale de aqui (ver el JSDoc del componente).
`size`	`"sm" \| "md" \| "lg"`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-comments-gap`	`var(--amset-space-3)`
`--amset-comments-indent`	`var(--amset-space-5)`
`--amset-comments-author`	`var(--amset-text-sm)`
`--amset-comments-date`	`var(--amset-text-xs)`
`--amset-comments-badge`	`var(--amset-text-xs)`
`--amset-comments-text`	`var(--amset-text-base)`
`--amset-comments-bubble`	`var(--amset-space-2) var(--amset-space-3)`
`--amset-comments-radius`	`var(--amset-radius)`

Cómo se cambia

.amset-comments {
  --amset-comments-gap: ...;
  --amset-comments-indent: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: