Ui.Modal

A simple, global, customizable modal component.

Some of its features:

  • Showing the component returns a promise which is resolved when its closed.
  • The keyboard focus is trapped in the list (Tab and Shift-Tab cyles focusable elements).
  • When closed the focus is returned to the last focused element before opening (which is usually the one that opened the modal).
  • When open pressing Esc closes it.
  • After opened it will focus the first focusable item (which usually is the close icon).
Demo

Since this is a global component you can just call Ui.Modal.open to show it.

let content =
<Ui.Modal.Content
title=<>"Hello There!"</>
icon={Ui.Icons.INFINITY}
content=<>"Content"</>
actions=<>
<Ui.Button
onClick={(event : Html.Event) { Ui.Modal.cancel() }}
label="Cancel"
type="faded"
/>
<Ui.Button
onClick={(event : Html.Event) { Ui.Modal.hide() }}
label="Cool!"
/>
</>
/>
let clickHandler =
(event : Html.Event) : Promise(Void) {
case await Ui.Modal.show(content) {
Maybe.Nothing => Ui.Notifications.notifyDefault(<>"Cancelled!"</>)
Maybe.Just => Ui.Notifications.notifyDefault(<>"Closed!"</>)
}
}
<Ui.Button onClick={clickHandler} label="Click to Open"/>
Custom Content

The given content is shown in the center of the screen above the backdrop.

let content =
<Ui.Button onClick={(event : Html.Event) { Ui.Modal.hide() }} label="Cool!"/>
let clickHandler =
(event : Html.Event) {
case await Ui.Modal.show(content) {
Maybe.Nothing => Ui.Notifications.notifyDefault(<>"Cancelled!"</>)
Maybe.Just => Ui.Notifications.notifyDefault(<>"Closed!"</>)
}
}
<Ui.Button onClick={clickHandler} label="Click to Open"/>
Advanced Usage

If you need more control over the modal you can call: Ui.Modal.showWithOptions(content, zIndex, transitionDuration, openCallback)

let content =
<Ui.Button onClick={(event : Html.Event) { Ui.Modal.hide() }} label="Cool!"/>
let clickHandler =
(event : Html.Event) {
let result =
await Ui.Modal.showWithOptions(content, 900, 240,
() { Ui.Notifications.notifyDefault(<>"Opened!"</>) })
case await result {
Maybe.Nothing => Ui.Notifications.notifyDefault(<>"Cancelled!"</>)
Maybe.Just => Ui.Notifications.notifyDefault(<>"Closed!"</>)
}
}
<Ui.Button onClick={clickHandler} label="Click to Open"/>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.