import {Button} from "@qinetik/anique/button";
import {Dialog} from "@qinetik/anique/dialog";
import {createSignal} from "solid-js";
import {Anique} from "@qinetik/anique";
import {styled} from "@qinetik/emotion";
const DialogContent = styled("div")`
border-radius: 1em;
background: ${Anique.colors.bg400};
box-sizing: border-box;
padding: 2em;
position: absolute;
`
export default function CenteredDialogExample() {
const [is1stOpen, setIs1stOpen] = createSignal(false)
return (
<>
<Button onClick={(e) => setIs1stOpen(!is1stOpen())}>Open Dialog</Button>
{is1stOpen() ? (
<Dialog
onCloseRequest={() => setIs1stOpen(false)}
isVisible={is1stOpen}
>
<DialogContent>
This is a centered dialog
</DialogContent>
</Dialog>
) : null}
</>
)
}
Dialog
Centered Dialog
Positioned Dialog
import {Anique, Column} from "@qinetik/anique";
import {PositionSelector} from "../../../../solid/components/PositionSelection";
import {Button} from "@qinetik/anique/button";
import {createSignal} from "solid-js";
import {Position, relativePositionStyle} from "@qinetik/anique/utils";
import {Dialog} from "@qinetik/anique/dialog";
import {styled} from "@qinetik/emotion";
const DialogContent = styled("div")`
border-radius: 1em;
background: ${Anique.colors.bg400};
box-sizing: border-box;
padding: 2em;
position: absolute;
`
export default function PositionedDialogExample() {
const [is2ndOpen, setIs2ndOpen] = createSignal(false)
const [activePosition, setActivePosition] = createSignal(Position.TopLeft);
return (
<Column gap={"0.5em"}>
<PositionSelector
activePosition={activePosition}
setActivePosition={setActivePosition}
/>
<Button onClick={(e) => setIs2ndOpen((o) => !o)}>Open Dialog</Button>
<Dialog
onCloseRequest={() => setIs2ndOpen(false)}
isVisible={is2ndOpen}
relative
>
<DialogContent
style={{
...relativePositionStyle(activePosition(), activePosition() != Position.Center ? "1em" : "0", activePosition() != Position.Center ? "1em" : "0")
}}
>
This is a positioned dialog
</DialogContent>
</Dialog>
</Column>
)
}
Alert Dialog Examples
import {Button} from "@qinetik/anique/button";
import {AlertDialog} from "@qinetik/anique/dialog";
import {createSignal} from "solid-js";
import {Icon, Row} from "@qinetik/anique";
import {AlertIcon} from "@qinetik/anique-icons";
export default function AlertDialogExamples() {
const [alertOpen, setAlertOpen] = createSignal(false)
const [alertIconOpen, setAlertIconOpen] = createSignal(false)
const [alertNoTitle, setAlertNoTitle] = createSignal(false)
const [alertOnlyContent, setAlertOnlyContent] = createSignal(false)
return (
<>
<Row gap={"1em"}>
<Button onClick={(e) => setAlertOpen((e) => !e)}>Simple</Button>
<Button onClick={(e) => setAlertIconOpen((e) => !e)}>With Title Icon</Button>
<Button onClick={(e) => setAlertNoTitle((e) => !e)}>No Title & Close</Button>
<Button onClick={(e) => setAlertOnlyContent((e) => !e)}>Only Content</Button>
</Row>
<AlertDialog
onCloseRequest={() => setAlertOpen(false)}
isVisible={alertOpen}
title={"Location Services"}
content={"Would you like to allow location service ?"}
actions={
<Button>Allow</Button>
}
/>
<AlertDialog
onCloseRequest={() => setAlertNoTitle(false)}
isVisible={alertNoTitle}
closeIcon={false}
content={"Would you like to allow location service ?"}
actions={
<Button>Allow</Button>
}
/>
<AlertDialog
onCloseRequest={() => setAlertOnlyContent(false)}
isVisible={alertOnlyContent}
closeIcon={false}
content={"Would you like to allow location service ?"}
/>
<AlertDialog
onCloseRequest={() => setAlertIconOpen(false)}
isVisible={alertIconOpen}
title={
<>
<Icon>
<AlertIcon/>
</Icon>
<h4 style={{margin: 0}}>Location Services</h4>
</>
}
content={"Would you like to allow location service ?"}
actions={
<>
<Button>Allow</Button>
</>
}
/>
</>
)
}
Nested Dialog Example
import {Button} from "@qinetik/anique/button";
import {Dialog} from "@qinetik/anique/dialog";
import {createSignal} from "solid-js";
import {Anique} from "@qinetik/anique";
import {css} from "@qinetik/emotion";
const dialogContent = (padding ?: string) => css`
border-radius: 1em;
background: ${Anique.colors.bg400};
box-sizing: border-box;
padding: ${padding || "2em"};
position: absolute;
display: flex;
gap: 1em;
`
export default function NestedDialogExample() {
const [is1stOpen, setIs1stOpen] = createSignal(false)
const [is2ndOpen, setIs2ndOpen] = createSignal(false)
const [is3rdOpen, setIs3rdOpen] = createSignal(false)
return (
<div>
<Button onClick={(e) => {
setIs1stOpen(v => !v)
}}>Open Dialog</Button>
<Dialog
onCloseRequest={() => setIs1stOpen(false)}
isVisible={is1stOpen}
>
<div class={dialogContent()()}>
<Button onClick={() => setIs2ndOpen(true)}>Open Nested outside</Button>
<Button onClick={() => setIs3rdOpen(true)}>Open Nested within</Button>
</div>
{/* Nested dialog that is inside the parent dialog */}
<Dialog
onCloseRequest={() => setIs3rdOpen(false)}
isVisible={is3rdOpen}
>
<div class={dialogContent("8em")()}>
<span>Close this one by clicking outside this dialog</span>
</div>
</Dialog>
</Dialog>
{/* Nested dialog that is outside the parent dialog */}
<Dialog
onCloseRequest={() => setIs2ndOpen(false)}
isVisible={is2ndOpen}
>
<div class={dialogContent("8em")()}>
<span>Close this one by clicking outside this dialog</span>
</div>
</Dialog>
</div>
)
}