import {HoverableDropdownMenu, MenuItem} from "@qinetik/anique/dropdown";
import {Button} from "@qinetik/anique";
export default function HoverableDropdownExample() {
return (
<HoverableDropdownMenu
exposed={() => <Button>Hoverable Dropdown</Button>}
>
<MenuItem>Hello World</MenuItem>
<MenuItem>First Item</MenuItem>
<MenuItem>Second Item</MenuItem>
<MenuItem>Third Item</MenuItem>
</HoverableDropdownMenu>
)
}
Dropdown Menu
import {Button} from "@qinetik/anique";
import {createSignal} from "solid-js";
import {DropdownMenu, MenuItem} from "@qinetik/anique/dropdown";
import BadgeIcon from "@qinetik/mdi/BadgeIcon";
import ShareAllIcon from "@qinetik/mdi/ShareAllIcon";
export default function DropdownExample() {
const [open, setOpen] = createSignal(false)
return (
<div>
<Button onClick={() => setOpen((o) => !o)}>Clickable Dropdown</Button>
{/*<Show when={open()}> use show if don't want it to mount*/}
<DropdownMenu onCloseRequest={() => setOpen(false)} isVisible={open}>
<MenuItem onClick={() => setOpen(false)}>Hello World</MenuItem>
<MenuItem onClick={() => setOpen(false)}>First Item</MenuItem>
<MenuItem onClick={() => setOpen(false)}>
<ShareAllIcon />
<span style={{ flex : 1 }}>Second Item</span>
<BadgeIcon />
</MenuItem>
<MenuItem>Doesn't Close</MenuItem>
</DropdownMenu>
{/*</Show>*/}
</div>
)
}
import {createSignal} from "solid-js";
import {AlertDialog, Button, DropdownMenu, MenuItem} from "@qinetik/anique";
export default function DropdownDialogExample() {
const [dialogOpen, setDialogOpen] = createSignal(false)
const [open, setOpen] = createSignal(false);
return (
<>
<Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
<AlertDialog
title={"Dialog Title"}
isVisible={dialogOpen}
onCloseRequest={() => setDialogOpen(false)}
content={
<div style={{position: 'relative'}}>
<Button onClick={() => setOpen(true)}>Open Menu</Button>
<DropdownMenu
onCloseRequest={() => setOpen(false)}
isVisible={open}
>
<MenuItem onClick={() => setOpen(false)}>Hello World</MenuItem>
<MenuItem onClick={() => {}}>Doesn't Close</MenuItem>
</DropdownMenu>
</div>
}
/>
</>
)
}
Card Title
open dropdown ->Here's an example of dropdown inside a clickable card, Clicking on dropdown menu items doesn't trigger the card click
import {ClickableCard, Column, IconButton, Row} from "@qinetik/anique";
import {createSignal} from "solid-js";
import {DropdownMenu, MenuItem} from "@qinetik/anique/dropdown";
import {MoreVertIcon} from "@qinetik/anique-icons";
import PinIcon from "@qinetik/mdi/PinIcon";
import ArchiveAddIcon from "@qinetik/mdi/ArchiveAddIcon";
import LabelOutlineIcon from "@qinetik/mdi/LabelOutlineIcon";
import ShareOutlineIcon from "@qinetik/mdi/ShareOutlineIcon";
import DeleteOutlineIcon from "@qinetik/mdi/DeleteOutlineIcon";
export default function CardActionsDropdownExample() {
const [open, setOpen] = createSignal(false)
type ElementEvent = MouseEvent & { currentTarget: HTMLDivElement, target: Element }
function onClickDePropagation(onClick: (e: ElementEvent) => void) {
return (e: ElementEvent) => {
e.stopImmediatePropagation()
onClick(e)
}
}
return (
<ClickableCard onClick={() => alert("You clicked on the card")}>
<Column gap={"0.5em"}>
<Row style={{width: "100%"}}>
<h3 style={{margin: 0, flex: 1}}>Card Title</h3>
open dropdown ->
<div style={{position: 'relative'}}>
<IconButton onClick={onClickDePropagation(() => setOpen(true))}>
<MoreVertIcon/>
</IconButton>
<DropdownMenu
onCloseRequest={() => setOpen(false)}
isVisible={open}
style={{right: 0}}
>
<MenuItem onClick={onClickDePropagation(() => setOpen(false))}>Hello World</MenuItem>
<MenuItem onClick={onClickDePropagation(() => {
})}>Doesn't Close</MenuItem>
</DropdownMenu>
</div>
</Row>
<p style={{margin: 0}}>
Here's an example of dropdown inside a clickable card, Clicking on dropdown menu items
doesn't trigger the card click
</p>
<Row style={{width: "100%"}}>
<IconButton onClick={onClickDePropagation(() => {
})}>
<ShareOutlineIcon/>
</IconButton>
<IconButton onClick={onClickDePropagation(() => {
})}>
<DeleteOutlineIcon/>
</IconButton>
<div style={{flex: 1}}/>
<IconButton onClick={onClickDePropagation(() => {
})}>
<ArchiveAddIcon/>
</IconButton>
<IconButton onClick={onClickDePropagation(() => {
})}>
<LabelOutlineIcon/>
</IconButton>
<IconButton onClick={onClickDePropagation(() => {
})}>
<PinIcon/>
</IconButton>
<IconButton onClick={onClickDePropagation(() => setOpen(true))}>
<MoreVertIcon/>
</IconButton>
</Row>
</Column>
</ClickableCard>
)
}