Esta página aún no está disponible en tu idioma.
A dropdown component that takes care of all the annoying bits for you, with added support for programmatic triggers on top.
You can change the modal’s size to one of three presets.
---import { Modal, Button } from '@studiocms/ui/components';---
<Modal id='modal' size='sm'> <h2 slot='header'>Small Modal</h2> <div> Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias. </div></Modal><Button color='primary' id='modal-trigger'> Small</Button>
<!-- Other modals and triggers omitted for simplicity -->
import { class ModalHelper
ModalHelper } from '@studiocms/ui/components';
const const modal: ModalHelper
modal = new new ModalHelper(id: string, triggerID?: string): ModalHelper
A helper to manage modals.
ModalHelper('modal', 'modal-trigger');
You can change whether a modal can be dismissed by clicking outside of it via the dismissable
prop.
---import { Modal, Button } from '@studiocms/ui/components';---
<Modal id='modal' dismissable={false}> <h2 slot='header'>Non-dismissable</h2> <div> Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias. </div></Modal><Button color='primary' id='modal-trigger'> Non-Dismissable</Button>
import { class ModalHelper
ModalHelper } from '@studiocms/ui/components';
const const modal: ModalHelper
modal = new new ModalHelper(id: string, triggerID?: string): ModalHelper
A helper to manage modals.
ModalHelper('modal', 'modal-trigger');
If a modal has buttons (see below), the x
button in the top right corner will disappear as well.
Modals support both a “cancel” and a “confirm” button.
---import { Modal, Button } from '@studiocms/ui/components';---
<Modal id='modal' cancelButton='Cancel' actionButton='Confirm'> <h2 slot='header'>Buttons</h2> <div> Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias. </div></Modal><Button color='primary' id='modal-trigger'> Buttons</Button>
import { class ModalHelper
ModalHelper } from '@studiocms/ui/components';
const const modal: ModalHelper
modal = new new ModalHelper(id: string, triggerID?: string): ModalHelper
A helper to manage modals.
ModalHelper('modal', 'modal-trigger');
If you want to, instead of passing the label as a string to the prop, you can instead pass an object with the label
and color
keys defined to change the way the buttons look:
---import { Modal, Button } from '@studiocms/ui/components';---
<Modal id='modal' cancelButton={{ label: 'Cancel', color: 'default' }} actionButton={{ label: 'Confirm', color: 'danger' }}> <h2 slot='header'>Buttons</h2> <div> Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias. </div></Modal><Button color='primary' id='modal-trigger'> Buttons</Button>
If you want to implement functionality based on which of the buttons is clicked, you can register a callback on each of them.
import { class ModalHelper
ModalHelper } from '@studiocms/ui/components';
const const modal: ModalHelper
modal = new new ModalHelper(id: string, triggerID?: string): ModalHelper
A helper to manage modals.
ModalHelper('modal', 'modal-trigger');
const modal: ModalHelper
modal.ModalHelper.registerCancelCallback: (func: () => void) => void
Registers a callback for the cancel button.
registerCancelCallback(() => { // Your logic here});
const modal: ModalHelper
modal.ModalHelper.registerConfirmCallback: (func: (data?: FormData | undefined) => void) => void
Registers a callback for the confirm button.
registerConfirmCallback(() => { // Your logic here});
You can turn your modals into forms by supplying the isForm
prop! This turns the Cancel
button into a reset button and the Confirm
button into a submission button.
This only changes their types, not their text.
By using the registerConfirmCallback
function, you can retrieve the FormData
after the Confirm
button is clicked. Any inputs in the modal will be included.
import { class ModalHelper
ModalHelper } from '@studiocms/ui/components';
const const modal: ModalHelper
modal = new new ModalHelper(id: string, triggerID?: string): ModalHelper
A helper to manage modals.
ModalHelper('modal', 'modal-trigger');
const modal: ModalHelper
modal.ModalHelper.registerConfirmCallback: (func: (data?: FormData | undefined) => void) => void
Registers a callback for the confirm button.
registerConfirmCallback((formData: any
formData) => { // Your logic here});
You can add multiple triggers to your modal by using the bindTrigger
function in combination with an element’s ID.
import { class ModalHelper
ModalHelper } from '@studiocms/ui/components';
const const modal: ModalHelper
modal = new new ModalHelper(id: string, triggerID?: string): ModalHelper
A helper to manage modals.
ModalHelper('modal', 'modal-trigger');const modal: ModalHelper
modal.ModalHelper.bindTrigger: (elementID: string) => void
A function to add another trigger to show the modal with.
bindTrigger('modal-trigger-two');const modal: ModalHelper
modal.ModalHelper.bindTrigger: (elementID: string) => void
A function to add another trigger to show the modal with.
bindTrigger('modal-trigger-three');
Similar to dropdowns, modals can be shown and hidden programatically:
import { class ModalHelper
ModalHelper } from '@studiocms/ui/components';
const const modal: ModalHelper
modal = new new ModalHelper(id: string, triggerID?: string): ModalHelper
A helper to manage modals.
ModalHelper('modal', 'modal-trigger');
const modal: ModalHelper
modal.ModalHelper.show: () => void
A function to show the modal.
show();const modal: ModalHelper
modal.ModalHelper.hide: () => void
A function to hide the modal.
hide();