mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
Merge branch 'main' of github.com:heroui-inc/heroui into canary
This commit is contained in:
commit
57b1181940
@ -39,13 +39,11 @@ export const Hero = () => {
|
||||
content: "font-semibold text-foreground text-xs ",
|
||||
}}
|
||||
color="primary"
|
||||
href="/blog/introducing-heroui"
|
||||
href="/blog/v2.7.0"
|
||||
variant="flat"
|
||||
onClick={() =>
|
||||
handlePressAnnouncement("Introducing HeroUI", "/blog/introducing-heroui")
|
||||
}
|
||||
onClick={() => handlePressAnnouncement("HeroUI v2.7.0", "/blog/v2.7.0")}
|
||||
>
|
||||
Introducing HeroUI
|
||||
HeroUI v2.7.0
|
||||
<span aria-label="emoji" role="img">
|
||||
🔥
|
||||
</span>
|
||||
|
||||
@ -220,11 +220,11 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
|
||||
content: "font-semibold text-foreground text-xs ",
|
||||
}}
|
||||
color="primary"
|
||||
href="/blog/introducing-heroui"
|
||||
href="/blog/v2.7.0"
|
||||
variant="flat"
|
||||
onClick={() => handlePressNavbarItem("Introducing HeroUI", "/blog/introducing-heroui")}
|
||||
onClick={() => handlePressNavbarItem("HeroUI v2.7.0", "/blog/v2.7.0")}
|
||||
>
|
||||
Introducing HeroUI
|
||||
HeroUI v2.7.0
|
||||
<span aria-label="emoji" role="img">
|
||||
🔥
|
||||
</span>
|
||||
|
||||
@ -177,9 +177,9 @@ export const useSandpack = ({
|
||||
dependencies,
|
||||
entry: entryFile,
|
||||
devDependencies: {
|
||||
autoprefixer: "^10.4.14",
|
||||
postcss: "^8.4.21",
|
||||
tailwindcss: "^3.2.7",
|
||||
autoprefixer: "10.4.20",
|
||||
postcss: "8.4.49",
|
||||
tailwindcss: "3.4.17",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ export default function App() {
|
||||
<h3>Min date</h3>
|
||||
<DatePicker
|
||||
defaultValue={today(getLocalTimeZone()).subtract({days: 1})}
|
||||
label="Date and time"
|
||||
label="Date"
|
||||
minValue={today(getLocalTimeZone())}
|
||||
/>
|
||||
</div>
|
||||
@ -16,7 +16,7 @@ export default function App() {
|
||||
<h3>Max date</h3>
|
||||
<DatePicker
|
||||
defaultValue={today(getLocalTimeZone()).add({days: 1})}
|
||||
label="Date and time"
|
||||
label="Date"
|
||||
maxValue={today(getLocalTimeZone())}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import {useState} from "react";
|
||||
import {
|
||||
Modal,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
ModalProps,
|
||||
Button,
|
||||
useDisclosure,
|
||||
RadioGroup,
|
||||
@ -13,22 +13,27 @@ import {
|
||||
|
||||
export default function App() {
|
||||
const {isOpen, onOpen, onOpenChange} = useDisclosure();
|
||||
const [scrollBehavior, setScrollBehavior] =
|
||||
React.useState < ModalProps["scrollBehavior"] > "inside";
|
||||
const [modalPlacement, setModalPlacement] = useState("auto");
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Button onPress={onOpen}>Open Modal</Button>
|
||||
<div className="flex px-10 min-h-[80vh] justify-center items-center flex-col gap-4">
|
||||
<Button className="max-w-fit" onPress={onOpen}>
|
||||
Open Modal
|
||||
</Button>
|
||||
<RadioGroup
|
||||
label="Select scroll behavior"
|
||||
label="Select modal placement"
|
||||
orientation="horizontal"
|
||||
value={scrollBehavior}
|
||||
onValueChange={setScrollBehavior}
|
||||
value={modalPlacement}
|
||||
onValueChange={setModalPlacement}
|
||||
>
|
||||
<Radio value="inside">inside</Radio>
|
||||
<Radio value="outside">outside</Radio>
|
||||
<Radio value="auto">auto</Radio>
|
||||
<Radio value="top">top</Radio>
|
||||
<Radio value="bottom">bottom</Radio>
|
||||
<Radio value="center">center</Radio>
|
||||
<Radio value="top-center">top-center</Radio>
|
||||
<Radio value="bottom-center">bottom-center</Radio>
|
||||
</RadioGroup>
|
||||
<Modal isOpen={isOpen} scrollBehavior={scrollBehavior} onOpenChange={onOpenChange}>
|
||||
<Modal isOpen={isOpen} placement={modalPlacement} onOpenChange={onOpenChange}>
|
||||
<ModalContent>
|
||||
{(onClose) => (
|
||||
<>
|
||||
@ -44,58 +49,6 @@ export default function App() {
|
||||
risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
|
||||
quam.
|
||||
</p>
|
||||
<p>
|
||||
Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
|
||||
adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
|
||||
officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
|
||||
nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
|
||||
deserunt nostrud ad veniam.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
|
||||
risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
|
||||
quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
|
||||
dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis
|
||||
sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
|
||||
incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod
|
||||
et. Culpa deserunt nostrud ad veniam.
|
||||
</p>
|
||||
<p>
|
||||
Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
|
||||
eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
|
||||
consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
|
||||
deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
|
||||
hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
|
||||
tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
|
||||
incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
|
||||
do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
|
||||
pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
|
||||
risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
|
||||
quam.
|
||||
</p>
|
||||
<p>
|
||||
Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
|
||||
adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
|
||||
officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
|
||||
nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
|
||||
deserunt nostrud ad veniam.
|
||||
</p>
|
||||
<p>
|
||||
Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
|
||||
eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
|
||||
consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
|
||||
deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
|
||||
hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
|
||||
tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
|
||||
incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
|
||||
do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
|
||||
pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
|
||||
</p>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="danger" variant="light" onPress={onClose}>
|
||||
|
||||
@ -84,8 +84,8 @@ You can disable this behavior by setting the following properties:
|
||||
### Drawer placement
|
||||
|
||||
The drawer can be placed on any edge of the screen using the `placement` prop:
|
||||
- `left` (default)
|
||||
- `right`
|
||||
- `left`
|
||||
- `right` (default)
|
||||
- `top`
|
||||
- `bottom`
|
||||
|
||||
|
||||
@ -204,24 +204,6 @@ Install `@heroui/use-theme` in your project.
|
||||
}}
|
||||
/>
|
||||
|
||||
### Add the current theme to the main element
|
||||
|
||||
```jsx
|
||||
// App.tsx or App.jsx
|
||||
import React from "react";
|
||||
import {useTheme} from "@heroui/use-theme";
|
||||
|
||||
export default function App() {
|
||||
const {theme} = useTheme();
|
||||
|
||||
return (
|
||||
<main className={`${theme} text-foreground bg-background`}>
|
||||
<App />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Add the theme switcher
|
||||
|
||||
Add the theme switcher to your app.
|
||||
|
||||
@ -52,7 +52,18 @@ export function useStackblitz(props: UseSandpackProps) {
|
||||
"dependencies": {
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
${Object.entries(omit(dependencies as any, ["react", "react-dom"]))
|
||||
${Object.entries(
|
||||
omit(dependencies as any, [
|
||||
"react",
|
||||
"react-dom",
|
||||
"react-dom/client",
|
||||
"@vitejs/plugin-react",
|
||||
"vite",
|
||||
"autoprefixer",
|
||||
"postcss",
|
||||
"tailwindcss",
|
||||
]),
|
||||
)
|
||||
.map(([key, value]) => `"${key}": "${value}"`)
|
||||
.join(",\n ")}
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user