Skip to content

Commit fafbb31

Browse files
thejacksheltonGregOnNet
thejackshelton
authored and
GregOnNet
committed
docs(docs): sheet examples
1 parent a83d3a5 commit fafbb31

File tree

4 files changed

+168
-5
lines changed

4 files changed

+168
-5
lines changed

‎apps/website/src/routes/docs/headless/(components)/modal/examples.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ import transitionExampleCode from './examples/transition?raw';
2929
import Sheet from './examples/sheet';
3030
import sheetExampleCode from './examples/sheet?raw';
3131

32+
import BottomSheet from './examples/bottom-sheet';
33+
import bottomSheetExampleCode from './examples/bottom-sheet?raw';
34+
3235
import buildingBlocksSnip from './examples/building-blocks-snip?raw';
3336
import pageLoadSnip from './examples/page-load-snip?raw';
3437
import animationSnip from './examples/animation-snip.css?raw';
@@ -79,6 +82,10 @@ export const examples: Record<string, Example> = {
7982
component: <Sheet />,
8083
code: sheetExampleCode,
8184
},
85+
bottomSheet: {
86+
component: <BottomSheet />,
87+
code: bottomSheetExampleCode,
88+
},
8289
};
8390

8491
export type ShowExampleProps = {

‎apps/website/src/routes/docs/headless/(components)/modal/examples/bottom-sheet.tsx

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import {
2+
component$,
3+
useSignal,
4+
type QwikIntrinsicElements,
5+
useStyles$,
6+
} from '@builder.io/qwik';
7+
import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
8+
9+
export default component$(() => {
10+
const showSig = useSignal(false);
11+
useStyles$(`
12+
.bottom-sheet::backdrop {
13+
background: hsla(0, 0%, 0%, 0.5);
14+
}
15+
16+
.bottom-sheet.modal-showing {
17+
animation: bottomSheetOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
18+
}
19+
20+
.bottom-sheet.modal-showing::backdrop {
21+
animation: sheetFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
22+
}
23+
24+
.bottom-sheet.modal-closing {
25+
animation: bottomSheetClose 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
26+
}
27+
28+
.bottom-sheet.modal-closing::backdrop {
29+
animation: sheetFadeOut 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
30+
}
31+
32+
@keyframes bottomSheetOpen {
33+
from {
34+
opacity: 0;
35+
transform: translateY(100%);
36+
}
37+
to {
38+
opacity: 1;
39+
transform: translateY(0%);
40+
}
41+
}
42+
43+
@keyframes bottomSheetClose {
44+
from {
45+
opacity: 1;
46+
transform: translateY(0%);
47+
}
48+
to {
49+
opacity: 0;
50+
transform: translateY(100%);
51+
}
52+
}
53+
54+
@keyframes sheetFadeIn {
55+
from {
56+
opacity: 0;
57+
}
58+
to {
59+
opacity: 1;
60+
}
61+
}
62+
63+
@keyframes sheetFadeOut {
64+
from {
65+
opacity: 1;
66+
}
67+
to {
68+
opacity: 0;
69+
}
70+
}
71+
72+
`);
73+
74+
return (
75+
<>
76+
<button
77+
onClick$={() => {
78+
showSig.value = true;
79+
}}
80+
class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white"
81+
>
82+
Open Modal
83+
</button>
84+
<Modal
85+
bind:show={showSig}
86+
class="bottom-sheet shadow-dark-medium fixed bottom-0 mb-0 max-w-[25rem] rounded-md border-0 bg-white p-[28px] text-slate-950 backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
87+
>
88+
<ModalHeader>
89+
<h2 class="text-lg font-bold">Edit Profile</h2>
90+
</ModalHeader>
91+
<ModalContent class="mb-2 py-4">
92+
<p class="mb-4 leading-5">
93+
You can update your profile here. Hit the save button when finished.
94+
</p>
95+
<fieldset class="mb-1 flex items-baseline justify-between">
96+
<label for="name">Name</label>
97+
<input
98+
class="mt-2 rounded-sm px-4 py-[10px] text-white"
99+
id="name"
100+
type="text"
101+
placeholder="John Doe"
102+
/>
103+
</fieldset>
104+
<fieldset class="flex items-baseline justify-between">
105+
<label for="email">Email</label>
106+
<input
107+
class="mt-2 rounded-sm px-4 py-3 text-white"
108+
id="email"
109+
type="text"
110+
placeholder="[email protected]"
111+
/>
112+
</fieldset>
113+
</ModalContent>
114+
<ModalFooter class="flex justify-end gap-4">
115+
<button
116+
class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
117+
onClick$={() => (showSig.value = false)}
118+
>
119+
Cancel
120+
</button>
121+
<button
122+
class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
123+
onClick$={() => (showSig.value = false)}
124+
>
125+
Save Changes
126+
</button>
127+
</ModalFooter>
128+
<button
129+
onClick$={() => (showSig.value = false)}
130+
class="absolute right-6 top-[26px]"
131+
>
132+
<CloseIcon class="h-8 w-8" />
133+
</button>
134+
</Modal>
135+
</>
136+
);
137+
});
138+
139+
export function CloseIcon(props: QwikIntrinsicElements['svg'], key: string) {
140+
return (
141+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
142+
<path
143+
fill="020617"
144+
d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
145+
></path>
146+
</svg>
147+
);
148+
}

‎apps/website/src/routes/docs/headless/(components)/modal/examples/sheet.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default component$(() => {
3232
@keyframes sheetOpen {
3333
from {
3434
opacity: 0;
35-
transform: translateX(calc(100%));
35+
transform: translateX(100%);
3636
}
3737
to {
3838
opacity: 1;
@@ -47,7 +47,7 @@ export default component$(() => {
4747
}
4848
to {
4949
opacity: 0;
50-
transform: translateX(calc(100%));
50+
transform: translateX(100%);
5151
}
5252
}
5353
@@ -83,7 +83,7 @@ export default component$(() => {
8383
</button>
8484
<Modal
8585
bind:show={showSig}
86-
class="sheet shadow-dark-medium fixed bottom-[50%] right-0 top-[50%] mr-0 h-[30rem] max-w-[25rem] rounded-md border-0 bg-white p-[28px] text-slate-950 backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
86+
class="sheet shadow-dark-medium fixed bottom-[50%] right-0 top-[50%] mr-0 h-[80vh] max-w-[25rem] rounded-md border-0 bg-white p-[28px] text-slate-950 backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
8787
>
8888
<ModalHeader>
8989
<h2 class="text-lg font-bold">Edit Profile</h2>

‎apps/website/src/routes/docs/headless/(components)/modal/index.mdx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -191,12 +191,20 @@ To add a backdrop animation, make sure to use the `::backdrop` pseudo selector t
191191

192192
> Firefox currently does not support backdrop animations. The fallback for browsers that do not support animated backdrops is the same as a non-animated backdrop.
193193
194-
## Custom Modal Placement
194+
## Sheets
195195

196-
### Sheet
196+
Sheets are a type of modal/overlay used to provide temporary access to important information, while also being easily dismissible.
197+
198+
### Side Sheet
197199

198200
<ShowExample example="sheet" />
199201

202+
### Bottom Sheet
203+
204+
<ShowExample example="bottomSheet" />
205+
206+
Bottom sheets are more prevalent in mobile applications, usually to simplify UI. That said, feel free to use them wherever fits best!
207+
200208
## Open on page load
201209

202210
There might come a time where a modal is needed open as soon as the page loads. Unfortunately, to create modals a client-side API is currently needed regardless of implementation.

0 commit comments

Comments
 (0)