A simple, global, customizable modal component.
Some of its features:
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"/>
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"/>
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 is a design system and component library for building websites, web and desktop applications.