-
Notifications
You must be signed in to change notification settings - Fork 145
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
199 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
146 changes: 146 additions & 0 deletions
146
apps/website/src/routes/docs/headless/(components)/dialog/examples.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,146 @@ | ||
import { component$, Slot } from '@builder.io/qwik'; | ||
import { Accordion, AccordionItem, Checkbox, Dialog } from '@qwik-ui/headless'; | ||
import { PreviewCodeExample } from '../../../../../components/preview-code-example/preview-code-example'; | ||
|
||
export const Example01 = component$(() => { | ||
return ( | ||
<PreviewCodeExample> | ||
<div q:slot="actualComponent"> | ||
<Dialog.Root> | ||
<Dialog.Trigger> | ||
<button>Open Dialog</button> | ||
</Dialog.Trigger> | ||
<Dialog.Portal>Hallo Welt</Dialog.Portal> | ||
</Dialog.Root> | ||
</div> | ||
|
||
<div q:slot="codeExample"> | ||
<Slot /> | ||
</div> | ||
</PreviewCodeExample> | ||
); | ||
}); | ||
|
||
export const Example02 = component$(() => { | ||
return ( | ||
<PreviewCodeExample> | ||
<div q:slot="actualComponent"> | ||
<Accordion class="bg-slate-100 dark:bg-gray-700 w-80 rounded-xl border-slate-200 dark:border-gray-600 border-[1px] overflow-hidden"> | ||
<AccordionItem | ||
class="px-4 py-2 w-full hover:bg-slate-300 dark:hover:bg-gray-800 border-slate-200 dark:border-gray-600 border-[1px] text-left" | ||
label="Is Qwik production-ready?" | ||
> | ||
<p class="bg-slate-200 dark:bg-gray-900 p-4"> | ||
Yes, Qwik just hit a major milestone and launched v1.0! All API | ||
features are considered stable. Start building the future, today! | ||
</p> | ||
</AccordionItem> | ||
<AccordionItem | ||
class="px-4 py-2 w-full hover:bg-slate-300 dark:hover:bg-gray-800 border-slate-200 dark:border-gray-600 border-[1px] text-left" | ||
label="Is there a UI library I can use with Qwik?" | ||
> | ||
<p class="bg-slate-200 dark:bg-gray-900 p-4"> | ||
You're looking at one right now! | ||
</p> | ||
</AccordionItem> | ||
<AccordionItem | ||
class="px-4 py-2 w-full hover:bg-slate-300 dark:hover:bg-gray-800 border-slate-200 dark:border-gray-600 border-[1px] text-left" | ||
label="How can I contribute to Qwik UI?" | ||
> | ||
<p class="bg-slate-200 dark:bg-gray-900 p-4"> | ||
We're glad you asked. Come join us at the Qwikifiers Discord | ||
server or find the{` `} | ||
<a | ||
class="text-[var(--qwik-light-blue)] inline" | ||
href="https://github.com/qwikifiers/qwik-ui" | ||
> | ||
Qwik UI repository | ||
</a> | ||
{` `} | ||
on GitHub! | ||
</p> | ||
</AccordionItem> | ||
</Accordion> | ||
</div> | ||
|
||
<div q:slot="codeExample"> | ||
<Slot /> | ||
</div> | ||
</PreviewCodeExample> | ||
); | ||
}); | ||
|
||
export const Example03 = component$(() => { | ||
return ( | ||
<PreviewCodeExample> | ||
<div q:slot="actualComponent"> | ||
<Accordion class="mt-4 p-4 bg-slate-800"> | ||
<AccordionItem label="Availability"> | ||
<ul> | ||
<li> | ||
<Checkbox.Label class="flex" for="in-stock"> | ||
<Checkbox.Root id="in-stock" /> | ||
In stock | ||
</Checkbox.Label> | ||
</li> | ||
<li> | ||
<Checkbox.Label class="flex" for="out-of-stock"> | ||
<Checkbox.Root id="out-of-stock" /> | ||
Out of stock | ||
</Checkbox.Label> | ||
</li> | ||
<li> | ||
<Checkbox.Label class="flex" for="coming-soon"> | ||
<Checkbox.Root id="coming-soon" /> | ||
Coming soon | ||
</Checkbox.Label> | ||
</li> | ||
</ul> | ||
</AccordionItem> | ||
<AccordionItem label="Promotions"> | ||
<ul> | ||
<li> | ||
<Checkbox.Label class="flex" for="fifty-off"> | ||
<Checkbox.Root id="fifty-off" /> | ||
50% off on selected products | ||
</Checkbox.Label> | ||
</li> | ||
<li> | ||
<Checkbox.Label class="flex" for="winter-special"> | ||
<Checkbox.Root id="winter-special" /> | ||
Winter specials | ||
</Checkbox.Label> | ||
</li> | ||
</ul> | ||
</AccordionItem> | ||
<AccordionItem label="Category"> | ||
<ul> | ||
<li> | ||
<Checkbox.Label class="flex" for="books"> | ||
<Checkbox.Root id="books" /> | ||
Books | ||
</Checkbox.Label> | ||
</li> | ||
<li> | ||
<Checkbox.Label class="flex" for="stationery"> | ||
<Checkbox.Root id="stationery" /> | ||
Stationery | ||
</Checkbox.Label> | ||
</li> | ||
<li> | ||
<Checkbox.Label class="flex" for="storage"> | ||
<Checkbox.Root id="storage" /> | ||
Storage | ||
</Checkbox.Label> | ||
</li> | ||
</ul> | ||
</AccordionItem> | ||
</Accordion> | ||
</div> | ||
|
||
<div q:slot="codeExample"> | ||
<Slot /> | ||
</div> | ||
</PreviewCodeExample> | ||
); | ||
}); |
43 changes: 43 additions & 0 deletions
43
apps/website/src/routes/docs/headless/(components)/dialog/index.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
--- | ||
title: Qwik UI | Dialog | ||
--- | ||
|
||
import { Dialog } from '@qwik-ui/headless'; | ||
import { Example01 } from './examples'; | ||
import { KeyboardInteractionTable } from '../../../../../components/keyboard-interaction-table/keyboard-interaction-table'; | ||
|
||
# Dialog | ||
|
||
#### A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. ([Definition comes from Radix-UI](https://www.radix-ui.com/docs/primitives/components/dialog)) | ||
|
||
{' '} | ||
|
||
<Example01> | ||
```tsx | ||
<Dialog.Root> | ||
<Dialog.Trigger> | ||
<button>Open Dialog</button> | ||
</Dialog.Trigger> | ||
<Dialog.Portal> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus | ||
aliquid architecto delectus deleniti dolor | ||
</p> | ||
</Dialog.Portal> | ||
|
||
</Dialog.Root> | ||
``` | ||
</Example01> | ||
|
||
## Accessibility | ||
|
||
### Keyboard interaction | ||
|
||
<KeyboardInteractionTable | ||
keyDescriptors={[ | ||
{ | ||
keyTitle: 'Escape', | ||
description: 'Closes the dialog.', | ||
}, | ||
]} | ||
/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,23 @@ | ||
export * from './components/accordion/accordion'; | ||
export * from './components/badge/badge'; | ||
export * from './components/breadcrumb'; | ||
export * from './components/button-group/button-group'; | ||
export * from './components/card'; | ||
export * as Carousel from './components/carousel/carousel'; | ||
export * from './components/carousel/use'; | ||
export * from './components/pagination/pagination'; | ||
export * as Checkbox from './components/checkbox/checkbox'; | ||
export * from './components/collapse/collapse'; | ||
export * as Dialog from './components/dialog/dialog'; | ||
export * from './components/drawer'; | ||
export * from './components/input-phone'; | ||
export * as Input from './components/input/input'; | ||
export * from './components/spinner/spinner'; | ||
export * from './components/menu/menu'; | ||
export * from './components/navigation-bar/navigation-bar'; | ||
export * from './components/pagination/pagination'; | ||
export * from './components/popover'; | ||
export * from './components/rating/rating'; | ||
export * as Select from './components/select/select'; | ||
export * from './components/slider'; | ||
export * from './components/spinner/spinner'; | ||
export * from './components/tabs/tabs'; | ||
export * from './components/tooltip/tooltip'; | ||
export * as Checkbox from './components/checkbox/checkbox'; | ||
export * as CheckboxProps from './components/checkbox/checkbox'; | ||
export * from './components/select/select'; | ||
export * from './components/slider'; | ||
export * from './components/breadcrumb'; | ||
export * from './components/navigation-bar/navigation-bar'; |