Componentes Interactivos
A menudo, querrá activar componentes interactivos además de cualquier contenido/animación que tenga en una página determinada. Dependiendo de la naturaleza de su extensión, puede querer definir elementos interactivos personalizados o reutilizar o extender los existentes.
Recuerde que todos los componentes utilizados en el núcleo de Flarum son exportados y puestos a disposición de las extensiones para su reutilización. Una lista completa está disponible en nuestra documentación de la API.
Alertas
Las alertas son gestionadas por una instancia global de AlertManagerState
, a la que se puede acceder a través de app.alerts
en los frontends forum
y admin
. Tiene 3 métodos de acceso público:
- La aplicación
app.alerts.show
añadirá una nueva alerta, y devolverá una clave que puede ser utilizada posteriormente para descartar esa alerta. Tiene 3 sobrecargas:app.alerts.show(children)
app.alerts.show(attrs, children)
app.alerts.show(componentClass, attrs, children)
app.alerts.dismiss(key)
desechará una alerta activa con la clave dada, si es que existe.app.alerts.clear()
descartará todas las alertas.
Normalmente, no necesitará un componente personalizado para las alertas; sin embargo, si lo desea, puede proporcionar uno. Probablemente querrá que herede de flarum/components/Alert
.
Los siguientes atrs son útiles para tener en cuenta:
- El attr
type
aplicará la clase cssAlert--{type}
. Si la alerta essuccess
, la alerta será verde, si eserror
, roja, y si está vacíatype
, amarilla. - El attr
dismiss
dictará si se mostrará un botón de desestimación. - El attr
ondismiss
se puede utilizar para proporcionar una llamada de retorno que se ejecutará cuando la alerta sea descartada. - Los componentes proporcionados en el attr
controls
se mostrarán después de los hijos de la alerta.
Modales
Los modales son gestionados por una instancia global de ModalManagerState
, a la que se puede acceder a través de app.modal
en los frontends foro
y admin
. Tiene 2 métodos de acceso público:
app.modal.show(componentClass, attrs)
mostrará un modal usando la clase de componente y los attrs dados. Si se llama mientras un modal ya está abierto, reemplazará el modal actualmente abierto.- El comando
app.modal.close()
cerrará el modal si hay uno activo.
A diferencia de las alertas, la mayoría de los modales utilizarán una clase personalizada, heredando flarum/components/Modal
. Por ejemplo:
import Modal from 'flarum/components/Modal';
export default class CustomModal extends Modal {
// Verdadero por defecto, dicta si el modal puede ser descartado haciendo clic en el fondo o en la esquina superior derecha.
static isDismissible = true;
className() {
// Clases CSS personalizadas para aplicar al modal
return 'custom-modal-class';
}
title() {
// Contenido a mostrar en la barra de título del modal
return <p>Custom Modal</p>;
}
content() {
// Contenido a mostrar en el cuerpo del modal
return <p>Hello World!</p>;
}
onsubmit() {
// Si tu modal contiene un formulario, puedes añadir aquí la lógica de procesamiento del mismo.
}
}
Hay más información sobre los métodos disponibles para anular en nuestra documentación de la API.
You can use the CLI to automatically generate a modal:
$ flarum-cli make frontend modal
Composer
Como Flarum es un foro, necesitamos herramientas para que los usuarios puedan crear y editar mensajes y discusiones. Flarum logra esto a través del componente compositor flotante.
El compositor es gestionado por una instancia global de ComposerState
, que es accesible a través de app.composer
en el frontend de forum
. Sus métodos públicos más importantes son:
app.composer.load(componentClass, attrs)
cargará un nuevo tipo de compositor. Si un compositor ya está activo, será reemplazado.app.composer.show()
mostrará el compositor si está actualmente oculto.app.composer.close()
cerrará y reiniciará el compositor después de confirmar con el usuario.app.composer.hide()
cerrará y reiniciará el compositor sin confirmar con el usuario.app.composer.bodyMatches(componentClass, attrs)
comprobará si el compositor actualmente activo es de un tipo determinado, y si sus atts coinciden con los attrs proporcionados opcionalmente.
The full list of public methods is documented in the API docs linked above.
Debido a que el compositor puede ser utilizado para varias acciones diferentes (iniciar una discusión, editar un mensaje, responder a una discusión, etc.), sus campos pueden variar dependiendo del uso. Esto se hace dividiendo el código para cada uso en una subclase de flarum/components/ComposerBody
. Esta clase de componente debe ser proporcionada cuando se carga un compositor.
Editor del Composer
El editor actual es otro componente, flarum/components/TextEditor
. Its state can be programatically accessed via an "editor driver", which implements EditorDriverInterface
. Está disponible globalmente para el compositor actual a través de app.composer.editor
. Tiene una variedad de métodos públicos que permiten a las extensiones insertar y modificar mediante programación el contenido actual, las selecciones y la posición del cursor del editor de texto del compositor activo.