A panel which comes up from the bottom of the screen and displays actions a user can take.
Some of its features:
Tab
and Shift-Tab
cyles focusable elements).Esc
closes it.let clickHandler = (event : Html.Event) { Ui.ActionSheet.show( [ Ui.NavItem.Group( iconBefore: Ui.Icons.CHECKLIST, iconAfter: <></>, label: "Group", items: [ Ui.NavItem.Link( iconBefore: Ui.Icons.CHECK, iconAfter: <></>, label: "Subitem", target: "", href: "/"), Ui.NavItem.Divider, Ui.NavItem.Link( iconBefore: Ui.Icons.CHECK, iconAfter: <></>, label: "Subitem 2", target: "", href: "/"), Ui.NavItem.Group( iconBefore: Ui.Icons.CHECKLIST, iconAfter: <></>, label: "Sub Group", items: [ Ui.NavItem.Link( iconBefore: Ui.Icons.CHECK, iconAfter: <></>, label: "Subitem 3", target: "", href: "/"), Ui.NavItem.Divider, Ui.NavItem.Link( iconBefore: Ui.Icons.CHECK, iconAfter: <></>, label: "Subitem 4", target: "", href: "/") ]) ]), Ui.NavItem.Link( iconBefore: Ui.Icons.HOME, iconAfter: <></>, label: "Home", target: "", href: "/"), Ui.NavItem.Divider, Ui.NavItem.Item( iconBefore: Ui.Icons.DESKTOP_DOWNLOAD, label: "Download", iconAfter: <></>, action: (event : Html.Event) { Ui.Notifications.notifyDefault(<>"Download!"</>) }) ]) }<Ui.Button label="Show Action Sheet" onClick={clickHandler}/>
<Ui.Button label="Show Action Sheet" onClick={ (event : Html.Event) { Ui.ActionSheet.showWithOptions(Ui.Size.Px(30), [ Ui.NavItem.Link( iconBefore: Ui.Icons.HOME, iconAfter: <></>, label: "Home", target: "", href: "/"), Ui.NavItem.Divider, Ui.NavItem.Item( iconBefore: Ui.Icons.DESKTOP_DOWNLOAD, iconAfter: <></>, label: "Download", action: (event : Html.Event) { Ui.Notifications.notifyDefault(<>"Download!"</>) }) ]) } }/>
<Ui.Button label="Show Action Sheet" onClick={ (event : Html.Event) { await Ui.ActionSheet.show( [ Ui.NavItem.Link( iconBefore: Ui.Icons.HOME, iconAfter: <></>, label: "Home", target: "", href: "/"), Ui.NavItem.Divider, Ui.NavItem.Item( iconBefore: Ui.Icons.DESKTOP_DOWNLOAD, label: "Download", iconAfter: <></>, action: (event : Html.Event) { Ui.Notifications.notifyDefault(<>"Download!"</>) }) ]) Ui.Notifications.notifyDefault(<>"Closed!"</>) } }/>
Mint UI is a design system and component library for building websites, web and desktop applications.