huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(React): jsx wrapped in enclosing tags (@headlessui-react/readme.md) (#10)

Browse Source
This commit is contained in:
Juan Luis Rojas León
2020-09-25 03:54:16 -05:00
committed by GitHub
parent 6d6be636d3
commit 46a33b2fbd
1 changed files with 68 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/@headlessui-react/README.md
+68 -58
View File
@@ -75,20 +75,22 @@ function MyComponent() {
const [isOpen, setIsOpen] = useState(false)
return (
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
enter="transition-opacity duration-75"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
I will fade in and out
</Transition>
<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
enter="transition-opacity duration-75"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
I will fade in and out
</Transition>
</>
)
}
```
@@ -105,15 +107,17 @@ function MyComponent() {
const [isOpen, setIsOpen] = useState(false)
return (
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
// ...
>
I will fade in and out
</Transition>
<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
// ...
>
I will fade in and out
</Transition>
</>
)
}
```
@@ -128,18 +132,20 @@ function MyComponent() {
const [isOpen, setIsOpen] = useState(false)
return (
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
as="a"
href="/my-url"
className="font-bold"
// ...
>
I will fade in and out
</Transition>
<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
as="a"
href="/my-url"
className="font-bold"
// ...
>
I will fade in and out
</Transition>
</>
)
}
```
@@ -154,15 +160,17 @@ function MyComponent() {
const [isOpen, setIsOpen] = useState(false)
return (
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
// ...
>
{ref => <div ref={ref}>{/* Your content goes here*/}</div>}
</Transition>
<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
// ...
>
{(ref) => <div ref={ref}>{/* Your content goes here*/}</div>}
</Transition>
</>
)
}
```
@@ -192,20 +200,22 @@ function MyComponent() {
const [isOpen, setIsOpen] = useState(false)
return (
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
enter="transition-opacity duration-75"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
I will fade in and out
</Transition>
<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
enter="transition-opacity duration-75"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
I will fade in and out
</Transition>
</>
)
}
```