MediaInput
El componente MediaInput permite a los usuarios seleccionar o cargar imágenes a través de una interfaz que incluye botones y galerías de imágenes. Admite múltiples selecciones y permite personalización a través de varios props, como títulos, iconos y comportamiento del modal.
Ejemplo
Importación
Para importar el componente MediaInput, se puede hacer desde fenextjs
import { MediaInput } from "fenextjs";Parámetros
| Parámetro | Tipo | Requerido | Default | Descripcion |
|---|---|---|---|---|
| className | string | no | '' | Clase CSS para personalizar el contenedor del componente MediaInput. |
| titleView | string | no | 'Upload Image' | Título que se muestra en la vista de carga de imágenes. |
| textView | string | no | 'Click for select or upload Image.' | Texto que se muestra en la vista de carga de imágenes. |
| iconView | ReactNode | no | undefined | Icono que se muestra junto al título y texto de la vista de carga. |
| defaultValue | ImgDataProps[] | ImgDataProps | no | undefined | Valor por defecto del componente, que puede ser una o varias imágenes. |
| multiple | boolean | no | false | Define si se pueden seleccionar múltiples imágenes. |
| onChange | (data: ImgDataProps[] | ImgDataProps | undefined) => void | no | undefined | Función que se ejecuta cuando cambian los datos seleccionados o cargados. |
| ButtonUploadProps | Omit<ButtonProps, 'onClick'> | no | { children: 'Upload Image', full: true } | Propiedades del botón de subida de imágenes. |
| MediaPageProps | Omit<MediaPageProps, 'onChange' | 'multiple' | 'defaultValue'> | no | {} | Propiedades adicionales para la galería de medios. |
| ModalProps | Pick<ModalBaseBaseProps, 'type'> | no | { type: 'full' } | Propiedades del modal que contiene la galería de imágenes. |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- MediaInput básico
<MediaInput />- MediaInput con múltiples imágenes
<MediaInput multiple={true} />- MediaInput con valores predeterminados
<MediaInput defaultValue={defaultImages} />