ReadOnlyLongTextField

ReadOnlyLongTextField renderiza un valor de texto multilínea como salida no editable. Preserva los espacios en blanco y los saltos de línea mediante white-space: pre-wrap, lo que lo hace adecuado para mostrar descripciones, notas o cualquier contenido extenso en pantallas de detalle y visualización.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | Sí | — | El texto multilínea a mostrar. Muestra "Sin contenido" cuando está vacío. | | label | string | No | — | Etiqueta mostrada encima del valor. | | description | string | No | — | Texto de ayuda mostrado debajo del valor en cursiva. | | placeholder | string | No | — | Aceptado pero no renderizado (reservado para consistencia de API). | | rows | number | No | 3 | Controla la altura mínima del área de visualización (cada fila equivale a ~20px). | | containerStyle | React.CSSProperties | No | — | Estilos personalizados para el div contenedor externo. | | valueStyle | React.CSSProperties | No | — | Estilos personalizados para el cuadro de texto. | | labelStyle | React.CSSProperties | No | — | Estilos personalizados para el elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos personalizados para el texto de descripción. |

Uso

Básico

import ReadOnlyLongTextField from '@/components/read-only-fields/ReadOnlyLongTextField';

<ReadOnlyLongTextField
  label="Notas"
  value="Esta es una nota multilínea.\nPreserva los saltos de línea."
/>

Con altura personalizada

<ReadOnlyLongTextField
  label="Descripción"
  value={product.description}
  rows={6}
  description="Descripción completa del producto tal como fue ingresada."
/>