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 {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 {debounce} from "lodash";
|
||||
|
||||
@ -11,13 +11,15 @@ interface CodeblockProps {
|
||||
codeString: string;
|
||||
metastring?: string;
|
||||
theme?: PrismTheme;
|
||||
children?: React.ReactNode;
|
||||
showLines?: boolean;
|
||||
removeIndent?: boolean;
|
||||
hideScrollBar?: boolean;
|
||||
className?: string;
|
||||
children?: (props: any) => React.ReactNode;
|
||||
}
|
||||
|
||||
type HighlightStyle = "inserted" | "deleted" | undefined;
|
||||
|
||||
const RE = /{([\d,-]+)}/;
|
||||
|
||||
const calculateLinesToHighlight = (meta?: string) => {
|
||||
@ -64,6 +66,32 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
|
||||
|
||||
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(() => {
|
||||
const handleSelectionChange = () => {
|
||||
if (!window.getSelection) return;
|
||||
@ -105,7 +133,7 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
|
||||
<BaseHighlight
|
||||
{...defaultProps}
|
||||
code={codeString}
|
||||
language={language}
|
||||
language={codeLang}
|
||||
theme={theme}
|
||||
{...props}
|
||||
>
|
||||
@ -138,6 +166,8 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
|
||||
shouldHighlightLine(i),
|
||||
},
|
||||
)}
|
||||
data-deleted={dataAttr(highlightStyle?.[i] === "deleted")}
|
||||
data-inserted={dataAttr(highlightStyle?.[i] === "inserted")}
|
||||
>
|
||||
{showLines && (
|
||||
<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}
|
||||
className="hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
|
||||
color="secondary"
|
||||
href="/blog/v2.1.0"
|
||||
href="/blog/v2.2.0"
|
||||
variant="dot"
|
||||
onClick={() => handlePressNavbarItem("Introducing v2.2.0", "/blog/v2.2.0")}
|
||||
>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
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."
|
||||
date: "2023-11-03"
|
||||
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-04"
|
||||
image: "/blog/v2.2.0.jpg"
|
||||
tags: ["nextui", "autocomplete", "breadcrumbs", "client side router", "slider"]
|
||||
author:
|
||||
@ -11,143 +11,418 @@ author:
|
||||
avatar: "/avatars/junior-garcia.jpeg"
|
||||
---
|
||||
|
||||
import {selectContent} from "@/content/components/select";
|
||||
import {listboxContent} from "@/content/components/listbox";
|
||||
import {scrollShadowContent} from "@/content/components/scroll-shadow";
|
||||
|
||||
import {autocompleteContent} from "@/content/components/autocomplete";
|
||||
import {sliderContent} from "@/content/components/slider";
|
||||
import {breadcrumbsContent} from "@/content/components/breadcrumbs";
|
||||
|
||||
<img
|
||||
src="/blog/v2.1.0.jpg"
|
||||
src="/blog/v2.2.0_2x.jpg"
|
||||
width={700}
|
||||
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"
|
||||
/>
|
||||
|
||||
We are thrilled to announce the latest update to NextUI, version **2.1.0**! This release introduces some game-changing
|
||||
additions that many of you have eagerly been waiting for.
|
||||
We are excited to announce the latest update to NextUI, version **2.2.0**! This release introduces 3 new components,
|
||||
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
|
||||
multi-select modes and is accessible out of the box.
|
||||
## What's New in v2.2.0?
|
||||
|
||||
But that's not all. We're also rolling out two more incredible components **Listbox** and **ScrollShadow**. The new
|
||||
**Listbox** allows you to make list manipulations more efficient and visually appealing. Meanwhile, the
|
||||
**ScrollShadow** component adds an elegant shadow effect to scrollable areas, enhancing the UI aesthetics while
|
||||
also improving usability.
|
||||
- [Client Side Routing](#client-side-routing) - Allows you to seamlessly incorporate client-side routers.
|
||||
- [Autocomplete](/docs/components/autocomplete) - Combines a text input with a listbox, allowing users to filter a list of options.
|
||||
- [Slider](/docs/components/slider) - Allows users to make selections from a range of values.
|
||||
- [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
|
||||
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 multiple options.
|
||||
- Support for disabled options.
|
||||
- Support for sections.
|
||||
- Labeling support for accessibility.
|
||||
- Exposed to assistive technology as a button with a listbox popup using ARIA (combined with [Listbox](/docs/components/listbox)).
|
||||
- Support for groups of items in sections.
|
||||
- Support for filtering a list of options by typing.
|
||||
- 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 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...
|
||||
|
||||
### 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
|
||||
and a listbox. The button displays the currently selected option and the listbox displays the available options.
|
||||
### Usage
|
||||
|
||||
<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 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} />
|
||||
You can customize the autocomplete items by modifying the `AutocompleteItem` children.
|
||||
|
||||
<CodeDemo title="Custom Items" files={autocompleteContent.customItems} />
|
||||
|
||||
### Customizable
|
||||
|
||||
The select component is highly customizable, you can customize the selected option, the options, the listbox,
|
||||
the popover and the scrollable area.
|
||||
The autocomplete component is highly customizable, you can customize the popover, listbox and
|
||||
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 listbox component allows you to make list manipulations more efficient and visually appealing.
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
frequently, such as stock prices or budgets.
|
||||
|
||||
### 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
|
||||
the CSS `mask-image` property, which makes the shadows adapt to the background color.
|
||||
You can use the `showSteps` prop to display small dots on each step.
|
||||
|
||||
<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
|
||||
|
||||
<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} />
|
||||
|
||||
<Spacer y={6}/>
|
||||
### 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} />
|
||||
|
||||
We hope you enjoy these new components and the new features. We're excited to see what you build with them!
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ export default function App() {
|
||||
step={100}
|
||||
maxValue={1000}
|
||||
minValue={0}
|
||||
defaultValue={[100, 300]}
|
||||
defaultValue={[0, 800]}
|
||||
showSteps={true}
|
||||
showTooltip={true}
|
||||
showOutline={true}
|
||||
|
||||
@ -6,6 +6,7 @@ export default function App() {
|
||||
<Slider
|
||||
size="sm"
|
||||
step={0.1}
|
||||
color="foreground"
|
||||
label="Temperature"
|
||||
showSteps={true}
|
||||
maxValue={1}
|
||||
@ -16,6 +17,7 @@ export default function App() {
|
||||
<Slider
|
||||
size="md"
|
||||
step={0.1}
|
||||
color="foreground"
|
||||
label="Temperature"
|
||||
showSteps={true}
|
||||
maxValue={1}
|
||||
@ -26,6 +28,7 @@ export default function App() {
|
||||
<Slider
|
||||
size="lg"
|
||||
step={0.1}
|
||||
color="foreground"
|
||||
label="Temperature"
|
||||
showSteps={true}
|
||||
maxValue={1}
|
||||
|
||||
@ -212,7 +212,10 @@ import {
|
||||
Listbox,
|
||||
ListboxItem,
|
||||
Dropdown,
|
||||
DropdownTrigger,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Button,
|
||||
Link,
|
||||
} from "@nextui-org/react";
|
||||
|
||||
@ -227,9 +230,14 @@ function App() {
|
||||
<ListboxItem key="home" href="/home">Home</ListboxItem>
|
||||
<ListboxItem key="about" href="/about">About</ListboxItem>
|
||||
</Listbox>
|
||||
<Dropdown aria-label="Navigation">
|
||||
<DropdownItem key="home" href="/home">Home</DropdownItem>
|
||||
<DropdownItem key="about" href="/about">About</DropdownItem>
|
||||
<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>
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* 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
|
||||
@ -191,3 +222,5 @@
|
||||
.token.language-javascript {
|
||||
@apply text-code-language-javascript;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user