|
15 | 15 |
|
16 | 16 | ## Installation
|
17 | 17 |
|
18 |
| -```shell |
| 18 | +```sh |
19 | 19 | # npm
|
20 | 20 | npm install @headlessui/react
|
21 | 21 |
|
@@ -52,6 +52,8 @@ We'll be continuing to develop new components on an on-going basis, with a goal
|
52 | 52 |
|
53 | 53 | ## Transition
|
54 | 54 |
|
| 55 | +[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-menu-example-b6xje?file=/src/App.js) |
| 56 | + |
55 | 57 | 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.
|
56 | 58 |
|
57 | 59 | - [Basic example](#basic-example)
|
@@ -369,6 +371,8 @@ function MyComponent({ isShowing }) {
|
369 | 371 |
|
370 | 372 | ## Menu Button (Dropdown)
|
371 | 373 |
|
| 374 | +[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-menu-example-b6xje?file=/src/App.js) |
| 375 | + |
372 | 376 | 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.
|
373 | 377 |
|
374 | 378 | - [Basic example](#basic-example-1)
|
@@ -535,23 +539,25 @@ function MyDropdown() {
|
535 | 539 | return (
|
536 | 540 | <Menu>
|
537 | 541 | {({ 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 | + </> |
555 | 561 | )}
|
556 | 562 | </Menu>
|
557 | 563 | )
|
|
0 commit comments