mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
Feat/v2 blog (#1858)
* feat: Slider Component (#1686) * feat(slider): initial structure * chore(slider): readme improved * fix: fixed border color of slider track * docs: added range story * feat: added rtl support to slider * feat: improved value label formatting * feat: refactor styling and add colors support to slider * chore: improved thumb color * docs: improved slider stories * chore(slider): default color changed by foreground * Update packages/core/theme/src/components/slider.ts Co-authored-by: Jakob Guddas <github@jguddas.de> * feat: added fillOffset prop * Update packages/components/slider/src/use-slider.ts * fix(slider): animation * Update packages/components/slider/src/use-slider.ts * Update packages/core/theme/src/components/slider.ts * feat: slider steps * refactor: renamed variables * feat: improved slider step styling * fix: hide infinite steps * fix: fixed step transparency issue * fix: fixed thumb focus issue * Update packages/components/slider/src/use-slider.ts Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * feat(slider): vertical orientation added, start & end content, bug fixes * chore(slider): tests added * fix(docs): scrollbar added to the sidebar (#1743) * feat(slider): marks added * chore(slider): example ts-doc changed * feat(slider): vertical marks support * feat(core): slider tooltip support added, popover modified (#1746) * Feat/slider custom styles (#1751) * feat(slider): custom styles story added * fix(slider): custom styles on different sizes * Fix/slider tooltip android position (#1753) * feat(slider): custom styles story added * fix(slider): tooltip update position dependecies added * fix(popover): arrow placements improved * feat(slider): docs started, custom thumb and custom output stories added * feat(slider): render function added to custom render the slider parts * feat(slider): docs in progress, new properties and examples added * fix(slider): some issues fixed, output renamed to value, documentation improved * feat(slider): docs done * chore: changeset --------- Co-authored-by: Jakob Guddas <github@jguddas.de> * Client side routing (#1764) * feat(slider): initial structure * chore(slider): readme improved * fix: fixed border color of slider track * docs: added range story * feat: added rtl support to slider * feat: improved value label formatting * feat: refactor styling and add colors support to slider * chore: improved thumb color * docs: improved slider stories * chore(slider): default color changed by foreground * Update packages/core/theme/src/components/slider.ts Co-authored-by: Jakob Guddas <github@jguddas.de> * feat: added fillOffset prop * Update packages/components/slider/src/use-slider.ts * fix(slider): animation * Update packages/components/slider/src/use-slider.ts * Update packages/core/theme/src/components/slider.ts * feat: slider steps * refactor: renamed variables * feat: improved slider step styling * fix: hide infinite steps * fix: fixed step transparency issue * fix: fixed thumb focus issue * Update packages/components/slider/src/use-slider.ts Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * feat(slider): vertical orientation added, start & end content, bug fixes * chore(slider): tests added * feat(slider): marks added * chore(slider): example ts-doc changed * feat(slider): vertical marks support * feat(core): slider tooltip support added, popover modified (#1746) * Feat/slider custom styles (#1751) * feat(slider): custom styles story added * fix(slider): custom styles on different sizes * Fix/slider tooltip android position (#1753) * feat(slider): custom styles story added * fix(slider): tooltip update position dependecies added * fix(popover): arrow placements improved * feat(slider): docs started, custom thumb and custom output stories added * feat(slider): render function added to custom render the slider parts * feat(slider): docs in progress, new properties and examples added * fix(slider): some issues fixed, output renamed to value, documentation improved * feat(slider): docs done * chore: changeset * chore: react aria packages upgraded * feat(system): router provider added * feat: client side routing support added to items components * chore(docs): routing docs started * chore: changeset * feat(docs): client side routing documented * feat(pagination): client router support added to pagination * fix(link): csr added --------- Co-authored-by: Jakob Guddas <github@jguddas.de> * feat: added RTL support to accordion component (#1725) * feat: added RTL support to accordion component * Create healthy-cobras-crash.md * feat: added RTL support to avatar and avatar group component (#1727) * feat: added RTL support to avatar and avatar group components * Create tender-penguins-love.md * Update tender-penguins-love.md * feat: added RTL support to button group component (#1726) * feat: added RTL support to button component * feat: added RTL support to button component * Create orange-bobcats-kneel.md * Update button.ts * refactor(root): styles refactor (#1688) * refactor(root): styles refactor * chore(tabs): remove needless type extends * fix(tabs): typecheck * Breadcrumbs component (#1794) * feat(components): breadcrumbs initial structure * feat(breadcrumbs): tests and examples added * feat(docs): breadcrumbs documentation done * feat(docs): breadcrumbs docs done * chore(breadcrumbs): readme changed * fix(slider): Place last dragged slider handle over the other handle (#1778) * Set `data-focused` in handle * Style focused handle on top * Add tests * fix(core): tests and build * fix(button): show only spinner if button isLoading & isIconOnly (#1800) * fix(button): show only spinner if button isLoading & isIconOnly * chore: add changeset * fix(button): remove repeating code * Fix blur/opaque Popover (#1812) * fix(popover): double underlay click * chore: use ref instead of a state * Feat/controlled scroll shadow (#1819) * feat(scroll-shadow): logic improved, controlled support added * feat(scroll-shadow): controlled visibility * fix(scroll-shadow): visibility tests * Autocomplete component (Single Selection) (#1797) * feat(autocomplete): initial structure * feat(core): use press custom hook implemented, autocomplete improved, input and select animations fixed * chore(button): add console.log on press * feat(core): select & input label position, autocomplete improvements, listbox and menu empty state * chore: tailwind-variants upgraded * chore: autocomplete stories in progress * fix: input and select label placement * fix(autocomplete): popover trigger * chore(root): react-aria pkgs and framer-motion upgraded * fix(input,select): outside label scale removed * feat(autocomplete): more stories and use cases supported * fix(core): custom items support on collection-based comps, menu generic items support added * chore(core): tailwind-variants upgraded, custom tv function adapted * chore(docs): select on-change controlled e.g. changed, sandpack theme fixed * chore(autocomplete): docs started, tests added * chore: in progress * feat(menu): top and end content added, autocomplete docs improved * feat(docs): autocomplete documentation almost done * fix(input): outside styles * feat(docs): autocomplete async filtering added * chore(docs): autocomplete highlighted lines added * feat(docs): autocomplete a11y and slots added * feat(docs): autocomplete a11y and slots added * feat(docs): autocomplete docs done * fix(root): peer dependencies (#1848) * Fix/small issues (#1851) * fix(input): visible outline * fix(button): button group radius prop * chore(navbar): menu item active status added * fix(docs): pagination missing keys custom items * fix(core): extendVariants support added to collection-based components * fix(theme): card body padding * chore(theme): transition added to menu/listbox items * fix(input): textarea styles fixed, new prop added * chore(input): textarea height animated * feat(button): hover opacity added * chore(textarea): hide scroll when the limit hasn't been reached * chore(docs): updated badge added to textarea * feat(docs): blog v2.2.0 image and entry added * fix(avatar): ring primary color * chore(docs): tabs added again, autocomplete iframes removed * chore: v2 blog post --------- Co-authored-by: Jakob Guddas <github@jguddas.de> Co-authored-by: Maurici Abad Gutierrez <hello@mauriciabad.com> Co-authored-by: Ivan Kucher <dev.kucher@gmail.com>
This commit is contained in:
Junior Garcia
GitHub
parent
5a4a60be65
commit
67ce4beb28
@ -1,5 +1,5 @@
|
|||||||
import React, {forwardRef, useEffect} from "react";
|
import React, {forwardRef, useEffect} from "react";
|
||||||
import {clsx, getUniqueID} from "@nextui-org/shared-utils";
|
import {clsx, dataAttr, getUniqueID} from "@nextui-org/shared-utils";
|
||||||
import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer";
|
import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer";
|
||||||
import {debounce} from "lodash";
|
import {debounce} from "lodash";
|
||||||
|
|
||||||
@ -11,13 +11,15 @@ interface CodeblockProps {
|
|||||||
codeString: string;
|
codeString: string;
|
||||||
metastring?: string;
|
metastring?: string;
|
||||||
theme?: PrismTheme;
|
theme?: PrismTheme;
|
||||||
|
children?: React.ReactNode;
|
||||||
showLines?: boolean;
|
showLines?: boolean;
|
||||||
removeIndent?: boolean;
|
removeIndent?: boolean;
|
||||||
hideScrollBar?: boolean;
|
hideScrollBar?: boolean;
|
||||||
className?: string;
|
className?: string;
|
||||||
children?: (props: any) => React.ReactNode;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type HighlightStyle = "inserted" | "deleted" | undefined;
|
||||||
|
|
||||||
const RE = /{([\d,-]+)}/;
|
const RE = /{([\d,-]+)}/;
|
||||||
|
|
||||||
const calculateLinesToHighlight = (meta?: string) => {
|
const calculateLinesToHighlight = (meta?: string) => {
|
||||||
@ -64,6 +66,32 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
|
|||||||
|
|
||||||
const lastSelectionText = React.useRef<string | null>(null);
|
const lastSelectionText = React.useRef<string | null>(null);
|
||||||
|
|
||||||
|
const isDiff = language.includes("diff");
|
||||||
|
|
||||||
|
const codeLang = isDiff ? (language.split("-")[1] as Language) : language;
|
||||||
|
|
||||||
|
let highlightStyle: HighlightStyle[] = [];
|
||||||
|
|
||||||
|
if (isDiff) {
|
||||||
|
let code: string[] = [];
|
||||||
|
|
||||||
|
highlightStyle = codeString.split?.("\n").map((line) => {
|
||||||
|
if (line.startsWith("+")) {
|
||||||
|
code.push(line.substr(1));
|
||||||
|
|
||||||
|
return "inserted";
|
||||||
|
}
|
||||||
|
if (line.startsWith("-")) {
|
||||||
|
code.push(line.substr(1));
|
||||||
|
|
||||||
|
return "deleted";
|
||||||
|
}
|
||||||
|
code.push(line);
|
||||||
|
});
|
||||||
|
|
||||||
|
codeString = code.join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleSelectionChange = () => {
|
const handleSelectionChange = () => {
|
||||||
if (!window.getSelection) return;
|
if (!window.getSelection) return;
|
||||||
@ -105,7 +133,7 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
|
|||||||
<BaseHighlight
|
<BaseHighlight
|
||||||
{...defaultProps}
|
{...defaultProps}
|
||||||
code={codeString}
|
code={codeString}
|
||||||
language={language}
|
language={codeLang}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
@ -138,6 +166,8 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
|
|||||||
shouldHighlightLine(i),
|
shouldHighlightLine(i),
|
||||||
},
|
},
|
||||||
)}
|
)}
|
||||||
|
data-deleted={dataAttr(highlightStyle?.[i] === "deleted")}
|
||||||
|
data-inserted={dataAttr(highlightStyle?.[i] === "inserted")}
|
||||||
>
|
>
|
||||||
{showLines && (
|
{showLines && (
|
||||||
<span className="select-none text-xs mr-6 opacity-30">{i + 1}</span>
|
<span className="select-none text-xs mr-6 opacity-30">{i + 1}</span>
|
||||||
|
|||||||
@ -247,7 +247,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
|
|||||||
as={NextLink}
|
as={NextLink}
|
||||||
className="hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
|
className="hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
href="/blog/v2.1.0"
|
href="/blog/v2.2.0"
|
||||||
variant="dot"
|
variant="dot"
|
||||||
onClick={() => handlePressNavbarItem("Introducing v2.2.0", "/blog/v2.2.0")}
|
onClick={() => handlePressNavbarItem("Introducing v2.2.0", "/blog/v2.2.0")}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: "Introducing v2.2.0 🚀"
|
title: "Introducing v2.2.0 🚀"
|
||||||
description: "NextUI v2.2.0 is here with Client side router support, 3 new components including the Autocomplete, and more."
|
description: "NextUI v2.2.0 is here! Dive into client-side router support, discover 3 new components including the Autocomplete, and more."
|
||||||
date: "2023-11-03"
|
date: "2023-11-04"
|
||||||
image: "/blog/v2.2.0.jpg"
|
image: "/blog/v2.2.0.jpg"
|
||||||
tags: ["nextui", "autocomplete", "breadcrumbs", "client side router", "slider"]
|
tags: ["nextui", "autocomplete", "breadcrumbs", "client side router", "slider"]
|
||||||
author:
|
author:
|
||||||
@ -11,141 +11,416 @@ author:
|
|||||||
avatar: "/avatars/junior-garcia.jpeg"
|
avatar: "/avatars/junior-garcia.jpeg"
|
||||||
---
|
---
|
||||||
|
|
||||||
import {selectContent} from "@/content/components/select";
|
import {autocompleteContent} from "@/content/components/autocomplete";
|
||||||
import {listboxContent} from "@/content/components/listbox";
|
import {sliderContent} from "@/content/components/slider";
|
||||||
import {scrollShadowContent} from "@/content/components/scroll-shadow";
|
import {breadcrumbsContent} from "@/content/components/breadcrumbs";
|
||||||
|
|
||||||
|
|
||||||
<img
|
<img
|
||||||
src="/blog/v2.1.0.jpg"
|
src="/blog/v2.2.0_2x.jpg"
|
||||||
width={700}
|
width={700}
|
||||||
height={350}
|
height={350}
|
||||||
alt="NextUI v2"
|
alt="NextUI v2.2.0"
|
||||||
className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
|
className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
We are thrilled to announce the latest update to NextUI, version **2.1.0**! This release introduces some game-changing
|
We are excited to announce the latest update to NextUI, version **2.2.0**! This release introduces 3 new components,
|
||||||
additions that many of you have eagerly been waiting for.
|
support for client-side routing, and more.
|
||||||
|
|
||||||
First on the list is the highly-anticipated **Select** component. Fully customizable and beautifully designed, supports both single and
|
## What's New in v2.2.0?
|
||||||
multi-select modes and is accessible out of the box.
|
|
||||||
|
|
||||||
But that's not all. We're also rolling out two more incredible components **Listbox** and **ScrollShadow**. The new
|
- [Client Side Routing](#client-side-routing) - Allows you to seamlessly incorporate client-side routers.
|
||||||
**Listbox** allows you to make list manipulations more efficient and visually appealing. Meanwhile, the
|
- [Autocomplete](/docs/components/autocomplete) - Combines a text input with a listbox, allowing users to filter a list of options.
|
||||||
**ScrollShadow** component adds an elegant shadow effect to scrollable areas, enhancing the UI aesthetics while
|
- [Slider](/docs/components/slider) - Allows users to make selections from a range of values.
|
||||||
also improving usability.
|
- [Breadcrumbs](/docs/components/breadcrumbs) - Displays a hierarchy of links to the current page or resource in an application.
|
||||||
|
- [Other Changes](#other-changes) - Includes styling improvements, accessibility and usability enhancements.
|
||||||
|
|
||||||
## Select
|
<Spacer y={4} />
|
||||||
|
|
||||||
Creating a select component that is both accessible and customizable is a challenging task. We've spent a lot of time
|
## Client Side Routing
|
||||||
|
|
||||||
|
By default, links perform native browser navigation when they are interacted with. However, many apps and
|
||||||
|
frameworks use client side routers to avoid a full page reload when navigating between pages.
|
||||||
|
|
||||||
|
NextUI now natively supports client-side routing in components such as [Link](/docs/components/link), [Tabs](/docs/components/tabs),
|
||||||
|
[Breadcrumbs](/docs/components/breadcrumbs), [Listbox](/docs/components/listbox), [Dropdown](/docs/components/dropdown) and many others offering
|
||||||
|
the flexibility to be rendered as HTML links, allowing you to seamlessly incorporate client-side routers. See the [Routing](/docs/guide/routing) guide to
|
||||||
|
learn how it set it up in your app.
|
||||||
|
|
||||||
|
The `NextUIProvider` component configures all NextUI components within it to navigate using the
|
||||||
|
client side router you provide.
|
||||||
|
|
||||||
|
> **Note**: Client side routing is based on [React Aria Routing](https://react-spectrum.adobe.com/react-aria/routing.html).
|
||||||
|
|
||||||
|
### Next.js Example
|
||||||
|
|
||||||
|
- App Router
|
||||||
|
|
||||||
|
Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't exist) and add the
|
||||||
|
`useRouter` hook from `next/navigation`, it returns a router object that can be used to perform navigation.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// app/providers.tsx
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import {NextUIProvider} from "@nextui-org/react";
|
||||||
|
|
||||||
|
export function Providers({children}: {children: React.ReactNode}) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
return <NextUIProvider navigate={router.push}>{children}</NextUIProvider>;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- Pages Router
|
||||||
|
|
||||||
|
Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and add the`useRouter` hook
|
||||||
|
from `next/router`, it returns a router object that can be used to perform navigation.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// pages/_app.tsx
|
||||||
|
import type {AppProps} from "next/app";
|
||||||
|
import {useRouter} from "next/router";
|
||||||
|
import {NextUIProvider} from "@nextui-org/react";
|
||||||
|
|
||||||
|
function MyApp({Component, pageProps}: AppProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NextUIProvider navigate={router.push}>
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</NextUIProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MyApp;
|
||||||
|
```
|
||||||
|
|
||||||
|
- Usage
|
||||||
|
|
||||||
|
Now that you have set up the `NextUIProvider` in your app, you can use the `href` prop in the `Tabs`,
|
||||||
|
`Listbox` and `Dropdown` items to navigate between pages.
|
||||||
|
|
||||||
|
The [Link](/docs/components/link) component will also use the `navigate` function from the
|
||||||
|
`NextUIProvider` to navigate between pages.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import {
|
||||||
|
Tabs,
|
||||||
|
Tab,
|
||||||
|
Listbox,
|
||||||
|
ListboxItem,
|
||||||
|
Dropdown,
|
||||||
|
DropdownTrigger,
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownItem,
|
||||||
|
Button,
|
||||||
|
Link,
|
||||||
|
} from "@nextui-org/react";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Tabs aria-label="Navigation">
|
||||||
|
<Tab key="home" href="/home">
|
||||||
|
Home
|
||||||
|
</Tab>
|
||||||
|
<Tab key="about" href="/about">
|
||||||
|
About
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
<Listbox aria-label="Navigation">
|
||||||
|
<ListboxItem key="home" href="/home">
|
||||||
|
Home
|
||||||
|
</ListboxItem>
|
||||||
|
<ListboxItem key="about" href="/about">
|
||||||
|
About
|
||||||
|
</ListboxItem>
|
||||||
|
</Listbox>
|
||||||
|
<Dropdown>
|
||||||
|
<DropdownTrigger>
|
||||||
|
<Button>Open</Button>
|
||||||
|
</DropdownTrigger>
|
||||||
|
<DropdownMenu aria-label="Navigation">
|
||||||
|
<DropdownItem key="home" href="/home">
|
||||||
|
Home
|
||||||
|
</DropdownItem>
|
||||||
|
<DropdownItem key="about" href="/about">
|
||||||
|
About
|
||||||
|
</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Link href="/home">Home</Link>
|
||||||
|
<Link href="/about">About</Link>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<Spacer y={4} />
|
||||||
|
|
||||||
|
## Autocomplete
|
||||||
|
|
||||||
|
Creating an autocomplete component that is both accessible and customizable is a challenging task. We've spent a lot of time
|
||||||
researching and testing different approaches to come up with a solution that works for everyone. The result is a
|
researching and testing different approaches to come up with a solution that works for everyone. The result is a
|
||||||
component that is easy to use, fully accessible, and highly customizable.
|
component that is easy to use, fully accessible, and highly customizable.
|
||||||
|
|
||||||
The new **Select** component includes:
|
The new **Autocomplete** component includes:
|
||||||
|
|
||||||
- Support for selecting a single option.
|
- Support for selecting a single option.
|
||||||
- Support for selecting multiple options.
|
|
||||||
- Support for disabled options.
|
- Support for disabled options.
|
||||||
- Support for sections.
|
- Support for groups of items in sections.
|
||||||
- Labeling support for accessibility.
|
- Support for filtering a list of options by typing.
|
||||||
- Exposed to assistive technology as a button with a listbox popup using ARIA (combined with [Listbox](/docs/components/listbox)).
|
- Support for controlled and uncontrolled options, selection and input value.
|
||||||
|
- Support for custom filter functions.
|
||||||
|
- Async loading and infinite scrolling support.
|
||||||
|
- Required and invalid states exposed to assistive technology via ARIA.
|
||||||
- Support for description and error message help text linked to the input via ARIA.
|
- Support for description and error message help text linked to the input via ARIA.
|
||||||
- Support for mouse, touch, and keyboard interactions.
|
|
||||||
- Tab stop focus management.
|
|
||||||
- Asynchronous options loading.
|
|
||||||
- Keyboard support for opening the listbox using the arrow keys, including automatically focusing the first or last item accordingly.
|
|
||||||
- Typeahead to allow selecting options by typing text, even without opening the listbox.
|
|
||||||
- Browser autofill integration via a hidden native `<select>` element.
|
|
||||||
- Support for mobile form navigation via software keyboard.
|
|
||||||
- Mobile screen reader listbox dismissal support.
|
|
||||||
- And much more...
|
- And much more...
|
||||||
|
|
||||||
### Single Select
|
We recommend to read this [Blog post](https://react-spectrum.adobe.com/blog/building-a-combobox.html) from [react-aria](https://react-spectrum.adobe.com/react-aria) team to learn more
|
||||||
|
about the Autocomplete component.
|
||||||
|
|
||||||
The single select component is used to select a single option from a list of options. It is a combination of a button
|
### Usage
|
||||||
and a listbox. The button displays the currently selected option and the listbox displays the available options.
|
|
||||||
|
|
||||||
<CodeDemo title="Usage" files={selectContent.usage} />
|
<CodeDemo title="Usage" files={autocompleteContent.usage} />
|
||||||
|
|
||||||
### Multiple Select
|
### Custom Items
|
||||||
|
|
||||||
The multiple select component can be used to select multiple options from a list of options.
|
You can customize the autocomplete items by modifying the `AutocompleteItem` children.
|
||||||
|
|
||||||
You only need to pass the `selectionMode="multiple"` prop to the `Select` component.
|
|
||||||
|
|
||||||
<CodeDemo title="Multiple Selection" files={selectContent.multiple} />
|
|
||||||
|
|
||||||
### Multiple Variants
|
|
||||||
|
|
||||||
The select component comes with multiple variants.
|
|
||||||
|
|
||||||
<CodeDemo title="Variants" files={selectContent.variants} />
|
|
||||||
|
|
||||||
|
|
||||||
### Chips Support
|
|
||||||
|
|
||||||
The select component is flexible and allows you to render any component as an option and as a selected option.
|
|
||||||
|
|
||||||
<CodeDemo title="Multiple Selection with Chips" files={selectContent.multipleWithChips} />
|
|
||||||
|
|
||||||
|
<CodeDemo title="Custom Items" files={autocompleteContent.customItems} />
|
||||||
|
|
||||||
### Customizable
|
### Customizable
|
||||||
|
|
||||||
The select component is highly customizable, you can customize the selected option, the options, the listbox,
|
The autocomplete component is highly customizable, you can customize the popover, listbox and
|
||||||
the popover and the scrollable area.
|
input components.
|
||||||
|
|
||||||
<CodeDemo title="Custom Styles" files={selectContent.customStyles} />
|
<CodeDemo title="Custom Styles" files={autocompleteContent.customStyles} />
|
||||||
|
|
||||||
|
Go to the [Autocomplete](/docs/components/autocomplete) component page to learn more about it.
|
||||||
|
|
||||||
Go to the [Select](/docs/components/select) component page to learn more about sizes, colors, and more.
|
<Spacer y={4} />
|
||||||
|
|
||||||
|
## Slider
|
||||||
|
|
||||||
## Listbox
|
The **Slider** component allows users to make selections from a range of values. It is a great way to allow users to
|
||||||
|
select a value from a fixed range, such as volume or temperature, or to select a value from a range that changes
|
||||||
The listbox component allows you to make list manipulations more efficient and visually appealing.
|
frequently, such as stock prices or budgets.
|
||||||
|
|
||||||
The new **Listbox** component includes:
|
|
||||||
|
|
||||||
- Support for single, multiple, or no selection.
|
|
||||||
- Exposed to assistive technology as a `listbox` using ARIA.
|
|
||||||
- Support for disabled items.
|
|
||||||
- Support for sections.
|
|
||||||
- Labeling support for accessibility.
|
|
||||||
- Support for mouse, touch, and keyboard interactions.
|
|
||||||
- Tab stop focus management.
|
|
||||||
- Keyboard navigation support including arrow keys, home/end, page up/down, select all, and clear.
|
|
||||||
- Automatic scrolling support during keyboard navigation.
|
|
||||||
- Typeahead to allow focusing options by typing text.
|
|
||||||
|
|
||||||
|
|
||||||
### Usage
|
### Usage
|
||||||
|
|
||||||
<CodeDemo title="Usage" files={listboxContent.usage} />
|
<CodeDemo title="Usage" files={sliderContent.usage} />
|
||||||
|
|
||||||
### Custom Styles
|
### Range Support
|
||||||
|
|
||||||
The Listbox components offers multiple customization options.
|
If you pass an array of values to the `value` prop or to the `defaultValue` prop, the slider will become a range slider.
|
||||||
|
|
||||||
<CodeDemo title="Custom Styles" files={listboxContent.customStyles} />
|
<CodeDemo title="Range Slider" files={sliderContent.range} />
|
||||||
|
|
||||||
> **Note**: In the above example, we've utilized the [Boxicons](https://boxicons.com/) icons collection.
|
### With Tooltip
|
||||||
|
|
||||||
Go to the [Listbox](/docs/components/listbox) component page to learn more about it.
|
The slider component also supports a tooltip to display the current value.
|
||||||
|
|
||||||
|
<CodeDemo title="With Tooltip" files={sliderContent.tooltip} />
|
||||||
|
|
||||||
## ScrollShadow
|
### Slider steps
|
||||||
|
|
||||||
The ScrollShadow component gives a nice shadow effect to scrollable areas. These shadows are handled by using
|
You can use the `showSteps` prop to display small dots on each step.
|
||||||
the CSS `mask-image` property, which makes the shadows adapt to the background color.
|
|
||||||
|
<CodeDemo title="With Visible Steps" files={sliderContent.visibleSteps} />
|
||||||
|
|
||||||
|
### Slider Custom Styles
|
||||||
|
|
||||||
|
You can customize the `Slider` component by passing custom Tailwind CSS classes to the component slots.
|
||||||
|
|
||||||
|
<CodeDemo title="Custom Styles" files={sliderContent.customStyles} />
|
||||||
|
|
||||||
|
Go to the [Slider](/docs/components/slider) component page to learn more about it.
|
||||||
|
|
||||||
|
<Spacer y={4} />
|
||||||
|
|
||||||
|
## Breadcrumbs
|
||||||
|
|
||||||
|
The **Breadcrumbs** is an essential component for navigating hierarchical content. It displays a hierarchy of links to the
|
||||||
|
current page or resource in an application.
|
||||||
|
|
||||||
### Usage
|
### Usage
|
||||||
|
|
||||||
<CodeDemo title="Usage" files={scrollShadowContent.usage} />
|
<CodeDemo title="Usage" files={breadcrumbsContent.usage} />
|
||||||
|
|
||||||
You can hide the scrollbars, customize the shadows size, change the orientation, and more.
|
### Breadcrumbs as menu
|
||||||
|
|
||||||
Go to the [ScrollShadow](/docs/components/scroll-shadow) component page to learn more about it.
|
It is possible to use the `Breadcrumbs` component as a horizontal menu. This is useful when you want to display a list
|
||||||
|
of possible navigations and let the user choose one of them.
|
||||||
|
|
||||||
|
<CodeDemo title="Menu Type" files={breadcrumbsContent.menuType} />
|
||||||
|
|
||||||
|
### Start & End Content support
|
||||||
|
|
||||||
|
You can add any element to the start or end of the breadcrumbs by using the `startContent` and `endContent` props. The
|
||||||
|
above example uses the `startContent` prop to add icons to the start of the breadcrumbs.
|
||||||
|
|
||||||
|
<CodeDemo title="Start & End Content" files={breadcrumbsContent.startEndContent} />
|
||||||
|
|
||||||
|
### Collapsing Items support
|
||||||
|
|
||||||
|
The `Breadcrumbs` component supports collapsing items, it is useful when you have a lot of items and you want to
|
||||||
|
collapse them into a dropdown menu.
|
||||||
|
|
||||||
|
<CodeDemo title="Customizing the Ellipsis Item" files={breadcrumbsContent.customizingEllipsis} />
|
||||||
|
|
||||||
|
### Apllying custom styles
|
||||||
|
|
||||||
|
You can customize the `Breadcrumbs` component by passing custom Tailwind CSS classes to the component slots.
|
||||||
|
|
||||||
|
<CodeDemo title="Custom Styles" files={breadcrumbsContent.customStyles} />
|
||||||
|
|
||||||
|
<Spacer y={4} />
|
||||||
|
|
||||||
|
Go to the [Breadcrumbs](/docs/components/breadcrumbs) component page to learn more about it.
|
||||||
|
|
||||||
|
## Other Changes
|
||||||
|
|
||||||
|
- Styling Improvements:
|
||||||
|
|
||||||
|
- Transitioned spacing units from pixels (px) to rem units to optimize mobile component sizing.
|
||||||
|
- Introduced a new `shouldSelectOnPressUp` property for `Tabs/Tab` with a default value of true, allowing tab selection on press-up instead of press-down.
|
||||||
|
- Updated Chip component's font size to text-tiny for the sm size variant.
|
||||||
|
- Enhanced the Button component to display only the spinner during loading when it contains an icon.
|
||||||
|
|
||||||
|
- Accessibility and Usability Enhancements:
|
||||||
|
|
||||||
|
- Resolved Popover component's open state issues for blur/opaque backdrops.
|
||||||
|
- Enhanced the ScrollShadow API, introducing visibility and onVisibilityChange properties to manage shadow visibility.
|
||||||
|
- Added `emptyContent`, `topContent`, and `bottomContent` properties to Listbox/Menu/Dropdown for customized content rendering.
|
||||||
|
- Introduced baseRef to the Input component, allowing control over the parent element's reference.
|
||||||
|
- Upgraded tailwind-variants to version `0.1.18`, incorporating slot props control.
|
||||||
|
|
||||||
|
- Right-to-Left (RTL) Support:
|
||||||
|
|
||||||
|
- Implemented RTL support for Accordion,
|
||||||
|
- Implemented RTL support for Accordion Avatar & AvatarGroup components,
|
||||||
|
- Implemented RTL support for ButtonGroup.
|
||||||
|
|
||||||
|
- Custom Implementations and Fixes:
|
||||||
|
|
||||||
|
- Implemented a custom `usePress` hook to address the corner press issue, with a corresponding pull request and issue submitted to the react-aria project.
|
||||||
|
- Applied the custom `usePress` across all NextUI interactive components for consistent behavior.
|
||||||
|
- Improved animations and positioning for Input & Select labels.
|
||||||
|
- Upgraded `react-aria` packages and `framer-motion` for enhanced performance.
|
||||||
|
- Enhanced TypeScript support for generic items in Menu and DropdownMenu.
|
||||||
|
- Streamlined package dependencies to exclude globally or individually installed packages, reducing bundle sizes.
|
||||||
|
|
||||||
|
- Visual and Interactive Tweaks:
|
||||||
|
|
||||||
|
- Removed the outline on Input focus-visible for a cleaner aesthetic.
|
||||||
|
- Fixed the radius property issue in `ButtonGroup`.
|
||||||
|
- Introduced the `isActive` prop for `NavbarMenuItem` for active state management.
|
||||||
|
- Corrected the Pagination custom-items example by adding the key prop.
|
||||||
|
- Enabled Collection Items support within the `extendVariants` function.
|
||||||
|
- Added transitions to menu/listbox items for smoother interaction.
|
||||||
|
- Added a `disableAutosize` property to `Textarea` to control auto-resizing.
|
||||||
|
- Resolved styling issues in Textarea and animated height adjustments for a fluid user experience.
|
||||||
|
- Included a `hoverOpacity` key in the themes object within the plugin for customized hover effects.
|
||||||
|
- Implemented a hover effect for the Button component to enhance user interaction feedback.
|
||||||
|
|
||||||
|
<Spacer y={4} />
|
||||||
|
|
||||||
|
## Breaking Changes
|
||||||
|
|
||||||
|
Unfortunately, we had to make some small styles breaking changes in this release to improve the [Popover](/docs/components/popover) arrow
|
||||||
|
dynamic positioning. Instead of having a specific slot for the popover arrow, we now use the `before` pseudo element, this allows the
|
||||||
|
popover to also move the arrow altogether.
|
||||||
|
|
||||||
|
This change impacts the Popover, Dropdown, Tooltip and Select implementations.
|
||||||
|
|
||||||
|
Popover changes:
|
||||||
|
|
||||||
|
```diff-jsx
|
||||||
|
<Popover
|
||||||
|
showArrow
|
||||||
|
backdrop="opaque"
|
||||||
|
placement="right"
|
||||||
|
classNames={{
|
||||||
|
- base: "py-3 px-4 border border-default-200 bg-gradient-to-br from-white to-default-300 dark:from-default-100 dark:to-default-50",
|
||||||
|
- arrow: "bg-default-200",
|
||||||
|
+ base: [
|
||||||
|
+ // the "before" pseudo element is now the popover' arrow
|
||||||
|
+ "before:bg-default-200"
|
||||||
|
+ ],
|
||||||
|
+ content: [ // now we need to use the "content" slot to actually modify the popover' content styles
|
||||||
|
+ "py-3 px-4 border border-default-200",
|
||||||
|
+ "bg-gradient-to-br from-white to-default-300",
|
||||||
|
+ "dark:from-default-100 dark:to-default-50",
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
...
|
||||||
|
</Popover>
|
||||||
|
```
|
||||||
|
|
||||||
|
Tooltip changes:
|
||||||
|
|
||||||
|
```diff-jsx
|
||||||
|
<Tooltip
|
||||||
|
showArrow
|
||||||
|
placement="right"
|
||||||
|
content="I am a tooltip"
|
||||||
|
classNames={{
|
||||||
|
- base: "py-2 px-4 shadow-xl text-black bg-gradient-to-br from-white to-neutral-400",
|
||||||
|
- arrow: "bg-neutral-400 dark:bg-white",
|
||||||
|
+ base: [
|
||||||
|
+ // the "before" pseudo element is now the popover' arrow
|
||||||
|
+ "before:bg-neutral-400 dark:before:bg-white",
|
||||||
|
+ ],
|
||||||
|
+ content: [ // now we need to use the "content" slot to actually modify the popover' content styles
|
||||||
|
+ "py-2 px-4 shadow-xl",
|
||||||
|
+ "text-black bg-gradient-to-br from-white to-neutral-400",
|
||||||
|
+ ],
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button variant="flat">Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
```
|
||||||
|
|
||||||
|
Select changes:
|
||||||
|
|
||||||
|
```diff-jsx
|
||||||
|
<Select
|
||||||
|
items={users}
|
||||||
|
label="Assigned to"
|
||||||
|
className="max-w-xs"
|
||||||
|
variant="bordered"
|
||||||
|
popoverProps={{
|
||||||
|
classNames: {
|
||||||
|
- base: "p-0 border-small border-divider bg-background",
|
||||||
|
- arrow: "bg-default-200",
|
||||||
|
+ base: "before:bg-default-200", // the before pseudo element controls the popover's arrow
|
||||||
|
+ content: "p-0 border-small border-divider bg-background", // now instead of the "base" slot we use the "content" slot
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
...
|
||||||
|
</Select>
|
||||||
|
);
|
||||||
|
}`;
|
||||||
|
```
|
||||||
|
|
||||||
|
Dropdown Changes
|
||||||
|
|
||||||
|
```diff-jsx
|
||||||
|
<Dropdown
|
||||||
|
showArrow
|
||||||
|
classNames={{
|
||||||
|
- base: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
|
||||||
|
- arrow: "bg-default-200",
|
||||||
|
+ content: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black", // now instead of the "base" slot we use the "content"
|
||||||
|
+ base: "before:bg-default-200", // the before pseudo element controls the popover's arrow
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
...
|
||||||
|
</Dropdown>
|
||||||
|
```
|
||||||
|
|
||||||
<Spacer y={6} />
|
<Spacer y={6} />
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@ export default function App() {
|
|||||||
step={100}
|
step={100}
|
||||||
maxValue={1000}
|
maxValue={1000}
|
||||||
minValue={0}
|
minValue={0}
|
||||||
defaultValue={[100, 300]}
|
defaultValue={[0, 800]}
|
||||||
showSteps={true}
|
showSteps={true}
|
||||||
showTooltip={true}
|
showTooltip={true}
|
||||||
showOutline={true}
|
showOutline={true}
|
||||||
|
|||||||
@ -6,6 +6,7 @@ export default function App() {
|
|||||||
<Slider
|
<Slider
|
||||||
size="sm"
|
size="sm"
|
||||||
step={0.1}
|
step={0.1}
|
||||||
|
color="foreground"
|
||||||
label="Temperature"
|
label="Temperature"
|
||||||
showSteps={true}
|
showSteps={true}
|
||||||
maxValue={1}
|
maxValue={1}
|
||||||
@ -16,6 +17,7 @@ export default function App() {
|
|||||||
<Slider
|
<Slider
|
||||||
size="md"
|
size="md"
|
||||||
step={0.1}
|
step={0.1}
|
||||||
|
color="foreground"
|
||||||
label="Temperature"
|
label="Temperature"
|
||||||
showSteps={true}
|
showSteps={true}
|
||||||
maxValue={1}
|
maxValue={1}
|
||||||
@ -26,6 +28,7 @@ export default function App() {
|
|||||||
<Slider
|
<Slider
|
||||||
size="lg"
|
size="lg"
|
||||||
step={0.1}
|
step={0.1}
|
||||||
|
color="foreground"
|
||||||
label="Temperature"
|
label="Temperature"
|
||||||
showSteps={true}
|
showSteps={true}
|
||||||
maxValue={1}
|
maxValue={1}
|
||||||
|
|||||||
@ -212,7 +212,10 @@ import {
|
|||||||
Listbox,
|
Listbox,
|
||||||
ListboxItem,
|
ListboxItem,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
|
DropdownTrigger,
|
||||||
|
DropdownMenu,
|
||||||
DropdownItem,
|
DropdownItem,
|
||||||
|
Button,
|
||||||
Link,
|
Link,
|
||||||
} from "@nextui-org/react";
|
} from "@nextui-org/react";
|
||||||
|
|
||||||
@ -227,9 +230,14 @@ function App() {
|
|||||||
<ListboxItem key="home" href="/home">Home</ListboxItem>
|
<ListboxItem key="home" href="/home">Home</ListboxItem>
|
||||||
<ListboxItem key="about" href="/about">About</ListboxItem>
|
<ListboxItem key="about" href="/about">About</ListboxItem>
|
||||||
</Listbox>
|
</Listbox>
|
||||||
<Dropdown aria-label="Navigation">
|
<Dropdown>
|
||||||
|
<DropdownTrigger>
|
||||||
|
<Button>Open</Button>
|
||||||
|
</DropdownTrigger>
|
||||||
|
<DropdownMenu aria-label="Navigation">
|
||||||
<DropdownItem key="home" href="/home">Home</DropdownItem>
|
<DropdownItem key="home" href="/home">Home</DropdownItem>
|
||||||
<DropdownItem key="about" href="/about">About</DropdownItem>
|
<DropdownItem key="about" href="/about">About</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
<Link href="/home">Home</Link>
|
<Link href="/home">Home</Link>
|
||||||
<Link href="/about">About</Link>
|
<Link href="/about">About</Link>
|
||||||
|
|||||||
BIN
apps/docs/public/blog/v2.2.0_2x.jpg
Normal file
BIN
apps/docs/public/blog/v2.2.0_2x.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
@ -146,6 +146,37 @@
|
|||||||
@apply opacity-0;
|
@apply opacity-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ----------------------------------------
|
||||||
|
* Highlighter styles
|
||||||
|
* ----------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
.token-line[data-inserted="true"] {
|
||||||
|
background: rgb(83, 180, 215, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-line[data-inserted="true"]:before {
|
||||||
|
content: "+";
|
||||||
|
color: rgb(83, 180, 215);
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-line[data-deleted="true"] {
|
||||||
|
background: rgb(178, 41, 78, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-line[data-deleted="true"]:before {
|
||||||
|
content: "-";
|
||||||
|
color: rgb(178, 41, 78);
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ----------------------------------------
|
* ----------------------------------------
|
||||||
* Code snippet styles
|
* Code snippet styles
|
||||||
@ -191,3 +222,5 @@
|
|||||||
.token.language-javascript {
|
.token.language-javascript {
|
||||||
@apply text-code-language-javascript;
|
@apply text-code-language-javascript;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user