Skip to content

Commit b051f13

Browse files
committed
docs: Add demo links
1 parent 8add6f4 commit b051f13

File tree

2 files changed

+25
-19
lines changed

2 files changed

+25
-19
lines changed

packages/@headlessui-react/README.md

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
## Installation
1717

18-
```shell
18+
```sh
1919
# npm
2020
npm install @headlessui/react
2121

@@ -52,6 +52,8 @@ We'll be continuing to develop new components on an on-going basis, with a goal
5252

5353
## Transition
5454

55+
[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-menu-example-b6xje?file=/src/App.js)
56+
5557
The `Transition` component lets you add enter/leave transitions to conditionally rendered elements, using CSS classes to control the actual transition styles in the different stages of the transition.
5658

5759
- [Basic example](#basic-example)
@@ -369,6 +371,8 @@ function MyComponent({ isShowing }) {
369371

370372
## Menu Button (Dropdown)
371373

374+
[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-menu-example-b6xje?file=/src/App.js)
375+
372376
The `Menu` component and related child components are used to quickly build custom dropdown components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard navigation support.
373377

374378
- [Basic example](#basic-example-1)
@@ -535,23 +539,25 @@ function MyDropdown() {
535539
return (
536540
<Menu>
537541
{({ open }) => (
538-
<Menu.Button>More</Menu.Button>
539-
540-
{/* Use the Transition + open render prop argument to add transitions. */}
541-
<Transition
542-
show={open}
543-
enter="transition duration-100 ease-out"
544-
enterFrom="transform scale-95 opacity-0"
545-
enterTo="transform scale-100 opacity-100"
546-
leave="transition duration-75 ease-out"
547-
leaveFrom="transform scale-100 opacity-100"
548-
leaveTo="transform scale-95 opacity-0"
549-
>
550-
<Menu.Items static>
551-
<Menu.Item>{/* ... */}</Menu.Item>
552-
{/* ... */}
553-
</Menu.Items>
554-
</Transition>
542+
<>
543+
<Menu.Button>More</Menu.Button>
544+
545+
{/* Use the Transition + open render prop argument to add transitions. */}
546+
<Transition
547+
show={open}
548+
enter="transition duration-100 ease-out"
549+
enterFrom="transform scale-95 opacity-0"
550+
enterTo="transform scale-100 opacity-100"
551+
leave="transition duration-75 ease-out"
552+
leaveFrom="transform scale-100 opacity-100"
553+
leaveTo="transform scale-95 opacity-0"
554+
>
555+
<Menu.Items static>
556+
<Menu.Item>{/* ... */}</Menu.Item>
557+
{/* ... */}
558+
</Menu.Items>
559+
</Transition>
560+
</>
555561
)}
556562
</Menu>
557563
)

packages/@headlessui-vue/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ We'll be continuing to develop new components on an on-going basis, with a goal
5353

5454
## Menu Button (Dropdown)
5555

56-
[View complete demo on CodeSandbox](https://codesandbox.io/s/flamboyant-glade-b2jb4?file=/src/App.vue)
56+
[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuivue-menu-example-70br3?file=/src/App.vue)
5757

5858
The `Menu` component and related child components are used to quickly build custom dropdown components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard navigation support.
5959

0 commit comments

Comments
 (0)