mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(docs): docs changes (#2868)
* feat(docs): add example how to set locale (#2867) * docs(guide): add an explanation for the installation guide (#2769) * docs(guide): add an explanation for the installation guide * docs(guide): add an explanation for the cli guide * docs(guide): add support for cli output * fix: change sort priority - cmdk (#2873) * docs: remove unsupported props in range calendar and date range picker (#2881) * chore(calendar): remove showMonthAndYearPickers from range calendar story * docs(date-range-picker): remove showMonthAndYearPickers info * docs(range-calendar): remove unsupported props * docs: refactor typing in form.ts (#2882) * chore(docs): supplement errorMessage behaviour in input (#2892) * refactor(docs): revise NextUI Provider structure * chore(docs): add updated tag --------- Co-authored-by: Nozomi-Hijikata <116155762+Nozomi-Hijikata@users.noreply.github.com> Co-authored-by: HaRuki <soccer_haruki15@me.com> Co-authored-by: Kaben <carnoxen@gmail.com>
This commit is contained in:
աӄա
GitHub
parent
73d9695994
commit
dc245874ce
@ -154,6 +154,16 @@ export const Cmdk: FC<{}> = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const prioritizeFirstLevelItems = (a: SearchResultItem, b: SearchResultItem) => {
|
||||
if (a.type === "lvl1") {
|
||||
return -1;
|
||||
} else if (b.type === "lvl1") {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
};
|
||||
|
||||
const results = useMemo<SearchResultItem[]>(
|
||||
function getResults() {
|
||||
if (query.length < 2) return [];
|
||||
@ -165,12 +175,22 @@ export const Cmdk: FC<{}> = () => {
|
||||
if (words.length === 1) {
|
||||
return matchSorter(data, query, {
|
||||
keys: MATCH_KEYS,
|
||||
sorter: (matches) => {
|
||||
matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item));
|
||||
|
||||
return matches;
|
||||
},
|
||||
}).slice(0, MAX_RESULTS);
|
||||
}
|
||||
|
||||
const matchesForEachWord = words.map((word) =>
|
||||
matchSorter(data, word, {
|
||||
keys: MATCH_KEYS,
|
||||
sorter: (matches) => {
|
||||
matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item));
|
||||
|
||||
return matches;
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
|
||||
@ -421,7 +421,8 @@
|
||||
"key": "nextui-provider",
|
||||
"title": "NextUI Provider",
|
||||
"keywords": "api references, nextui, api, nextui provider",
|
||||
"path": "/docs/api-references/nextui-provider.mdx"
|
||||
"path": "/docs/api-references/nextui-provider.mdx",
|
||||
"updated": true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@ export default function App() {
|
||||
variant="bordered"
|
||||
isInvalid={isInvalid}
|
||||
color={isInvalid ? "danger" : "success"}
|
||||
errorMessage={isInvalid && "Please enter a valid email"}
|
||||
errorMessage="Please enter a valid email"
|
||||
onValueChange={setValue}
|
||||
className="max-w-xs"
|
||||
/>
|
||||
|
||||
@ -69,7 +69,7 @@ export default function App() {
|
||||
const AppTs = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const [selected, setSelected] = React.useState<string | number>("login");
|
||||
const [selected, setSelected] = React.useState<React.Key>("login");
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full">
|
||||
|
||||
@ -5,80 +5,167 @@ description: API References for NextUI Provider
|
||||
|
||||
# NextUI Provider
|
||||
|
||||
API reference for the `NextUIProvider`.
|
||||
|
||||
------
|
||||
|
||||
Here's the API reference for the `NextUIProvider`.
|
||||
## Import
|
||||
|
||||
## Props
|
||||
<ImportTabs
|
||||
commands={{
|
||||
main: 'import {NextUIProvider} from "@nextui-org/react";',
|
||||
individual: 'import {NextUIProvider} from "@nextui-org/system";',
|
||||
}}
|
||||
/>
|
||||
|
||||
### navigate
|
||||
## Usage
|
||||
|
||||
`navigate` provides a client side router to all nested components such as Link, Menu, Tabs, Table, etc.
|
||||
```jsx
|
||||
import * as React from "react";
|
||||
import {NextUIProvider} from "@nextui-org/react";
|
||||
|
||||
**type**: `((path: string) => void) | undefined`
|
||||
|
||||
### locale
|
||||
|
||||
The locale to apply to the children. The [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code for the locale. By default, It is `en-US`.
|
||||
|
||||
**type**: `string | undefined`
|
||||
|
||||
### defaultDates
|
||||
|
||||
The default dates range that can be selected in the calendar.
|
||||
|
||||
**type**: `{ minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }`
|
||||
|
||||
- minDate
|
||||
|
||||
The minimum date that can be selected in the calendar.
|
||||
|
||||
**type**: `CalendarDate | undefined`
|
||||
|
||||
**default**: `new CalendarDate(1900, 1, 1)`
|
||||
|
||||
- maxDate
|
||||
|
||||
The maximum date that can be selected in the calendar.
|
||||
|
||||
**type**: `CalendarDate | undefined`
|
||||
|
||||
**default**: `new CalendarDate(2099, 12, 31)`
|
||||
|
||||
### createCalendar
|
||||
|
||||
This function helps to reduce the bundle size by providing a custom calendar system.
|
||||
|
||||
By default, this includes all calendar systems supported by `@internationalized/date`. However,
|
||||
if your application supports a more limited set of regions, or you know you will only be picking dates
|
||||
in a certain calendar system, you can reduce your bundle size by providing your own implementation
|
||||
of `createCalendar` that includes a subset of these Calendar implementations.
|
||||
|
||||
For example, if your application only supports Gregorian dates, you could implement a `createCalendar`
|
||||
function like this:
|
||||
|
||||
```tsx
|
||||
import {GregorianCalendar} from '@internationalized/date';
|
||||
|
||||
function createCalendar(identifier) {
|
||||
switch (identifier) {
|
||||
case 'gregory':
|
||||
return new GregorianCalendar();
|
||||
default:
|
||||
throw new Error(`Unsupported calendar ${identifier}`);
|
||||
}
|
||||
function App() {
|
||||
return (
|
||||
<NextUIProvider>
|
||||
<YourApplication />
|
||||
</NextUIProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
This way, only GregorianCalendar is imported, and the other calendar implementations can be tree-shaken.
|
||||
## Props
|
||||
|
||||
**type**: `((calendar: SupportedCalendars) => Calendar | null) | undefined`
|
||||
<Spacer y={6}/>
|
||||
|
||||
`navigate`
|
||||
|
||||
- **Description**: Provides a client side router to all nested components such as Link, Menu, Tabs, Table, etc.
|
||||
- **Type**: `((path: string) => void) | undefined`
|
||||
|
||||
<Spacer y={2}/>
|
||||
|
||||
`locale`
|
||||
|
||||
- **Description**: The locale to apply to the children.
|
||||
- **Type**: `string | undefined`
|
||||
- **Default**: `en-US`
|
||||
|
||||
|
||||
Here's the supported locales. By default, It is `en-US`.
|
||||
|
||||
```tsx
|
||||
const localeValues = [
|
||||
'fr-FR', 'fr-CA', 'de-DE', 'en-US', 'en-GB', 'ja-JP',
|
||||
'da-DK', 'nl-NL', 'fi-FI', 'it-IT', 'nb-NO', 'es-ES',
|
||||
'sv-SE', 'pt-BR', 'zh-CN', 'zh-TW', 'ko-KR', 'bg-BG',
|
||||
'hr-HR', 'cs-CZ', 'et-EE', 'hu-HU', 'lv-LV', 'lt-LT',
|
||||
'pl-PL', 'ro-RO', 'ru-RU', 'sr-SP', 'sk-SK', 'sl-SI',
|
||||
'tr-TR', 'uk-UA', 'ar-AE', 'ar-DZ', 'AR-EG', 'ar-SA',
|
||||
'el-GR', 'he-IL', 'fa-AF', 'am-ET', 'hi-IN', 'th-TH'
|
||||
];
|
||||
```
|
||||
|
||||
Here's an example to set a Spanish locale.
|
||||
|
||||
```tsx
|
||||
"use client";
|
||||
|
||||
import {type ReactNode} from "react";
|
||||
import {NextUIProvider} from "@nextui-org/react";
|
||||
|
||||
export function AppProvider(props: AppProviderProps) {
|
||||
const {children, className} = props;
|
||||
|
||||
return (
|
||||
<NextUIProvider locale="es-ES" className={className}>
|
||||
{children}
|
||||
</NextUIProvider>
|
||||
);
|
||||
}
|
||||
|
||||
interface AppProviderProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
```
|
||||
|
||||
<Spacer y={2}/>
|
||||
|
||||
`defaultDates`
|
||||
|
||||
- **Description**: The default dates range that can be selected in the calendar.
|
||||
- **Type**: `{ minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }`
|
||||
- **Default**: `{ minDate: new CalendarDate(1900, 1, 1), maxDate: new CalendarDate(2099, 12, 31) }`
|
||||
|
||||
<Spacer y={2}/>
|
||||
|
||||
`createCalendar`
|
||||
|
||||
- **Description**:
|
||||
This function helps to reduce the bundle size by providing a custom calendar system.
|
||||
|
||||
By default, this includes all calendar systems supported by `@internationalized/date`. However,
|
||||
if your application supports a more limited set of regions, or you know you will only be picking dates
|
||||
in a certain calendar system, you can reduce your bundle size by providing your own implementation
|
||||
of `createCalendar` that includes a subset of these Calendar implementations.
|
||||
|
||||
For example, if your application only supports Gregorian dates, you could implement a `createCalendar`
|
||||
function like this:
|
||||
|
||||
```tsx
|
||||
import {GregorianCalendar} from '@internationalized/date';
|
||||
|
||||
function createCalendar(identifier) {
|
||||
switch (identifier) {
|
||||
case 'gregory':
|
||||
return new GregorianCalendar();
|
||||
default:
|
||||
throw new Error(`Unsupported calendar ${identifier}`);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This way, only GregorianCalendar is imported, and the other calendar implementations can be tree-shaken.
|
||||
|
||||
- **Type**: `((calendar: SupportedCalendars) => Calendar | null) | undefined`
|
||||
|
||||
<Spacer y={2}/>
|
||||
|
||||
`disableAnimation`
|
||||
|
||||
- **Description**: Disables animations globally. This will also avoid `framer-motion` features to be loaded in the bundle which can potentially reduce the bundle size.
|
||||
- **Type**: `boolean`
|
||||
- **Default**: `false`
|
||||
|
||||
<Spacer y={2}/>
|
||||
|
||||
`disableRipple`
|
||||
|
||||
- **Description**: Disables ripple effect globally.
|
||||
- **Type**: `boolean`
|
||||
- **Default**: `false`
|
||||
|
||||
<Spacer y={2}/>
|
||||
|
||||
`skipFramerMotionAnimations`
|
||||
|
||||
- **Description**:
|
||||
Controls whether `framer-motion` animations are skipped within the application.
|
||||
This property is automatically enabled (`true`) when the `disableAnimation` prop is set to `true`,
|
||||
effectively skipping all `framer-motion` animations. To retain `framer-motion` animations while
|
||||
using the `disableAnimation` prop for other purposes, set this to `false`. However, note that
|
||||
animations in NextUI Components are still omitted if the `disableAnimation` prop is `true`.
|
||||
- **Type**: `boolean`
|
||||
- **Default**: Same as `disableAnimation`
|
||||
|
||||
---
|
||||
|
||||
## Types
|
||||
|
||||
### CalendarDate
|
||||
`CalendarDate`
|
||||
|
||||
A [CalendarDate](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html) represents a date without any time components in a specific calendar system from `@internationalized/date`.
|
||||
- **Description**: A [CalendarDate](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html) represents a date without any time components in a specific calendar system from `@internationalized/date`.
|
||||
- **Type**: `import {CalendarDate} from '@internationalized/date';`
|
||||
|
||||
### SupportedCalendars
|
||||
|
||||
|
||||
@ -348,7 +348,7 @@ import {I18nProvider} from "@react-aria/i18n";
|
||||
### DateRangePicker Props
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
|
||||
|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------|
|
||||
| label | `ReactNode` | The content to display as the label. | - |
|
||||
| value | `RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>` \| `undefined` \| `null` | The current value of the date-range-picker (controlled). | - |
|
||||
| variant | `flat` \| `bordered` \| `faded` \| `underlined` | The variant of the date input. | `flat` |
|
||||
@ -375,7 +375,7 @@ import {I18nProvider} from "@react-aria/i18n";
|
||||
| selectorIcon | `ReactNode` | The icon to toggle the date picker popover. Usually a calendar icon. | |
|
||||
| pageBehavior | `single` \| `visible` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | `visible` |
|
||||
| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - |
|
||||
| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop. | `1` |
|
||||
| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. | `1` |
|
||||
| autoFocus | `boolean` | Whether the element should receive focus on render. | `false` |
|
||||
| hourCycle | `12` \| `24` | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale. | - |
|
||||
| granularity | `day` \| `hour` \| `minute` \| `second` | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates. | - |
|
||||
|
||||
@ -108,7 +108,7 @@ You can add a description to the input by passing the `description` property.
|
||||
|
||||
### With Error Message
|
||||
|
||||
You can combine the `isInvalid` and `errorMessage` properties to show an invalid input.
|
||||
You can combine the `isInvalid` and `errorMessage` properties to show an invalid input. `errorMessage` is only shown when `isInvalid` is set to `true`.
|
||||
|
||||
<CodeDemo title="With Error Message" files={inputContent.errorMessage} />
|
||||
|
||||
@ -206,7 +206,7 @@ In case you need to customize the input even further, you can use the `useInput`
|
||||
| defaultValue | `string` | The default value of the input (uncontrolled). | - |
|
||||
| placeholder | `string` | The placeholder of the input. | - |
|
||||
| description | `ReactNode` | A description for the input. Provides a hint such as specific requirements for what to choose. | - |
|
||||
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. | - |
|
||||
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. It is only shown when `isInvalid` is set to `true` | - |
|
||||
| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
|
||||
| startContent | `ReactNode` | Element to be rendered in the left side of the input. | - |
|
||||
| endContent | `ReactNode` | Element to be rendered in the right side of the input. | - |
|
||||
|
||||
@ -201,38 +201,35 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
|
||||
|
||||
### RangeCalendar Props
|
||||
|
||||
| Attribute | Type | Description | Default | |
|
||||
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | --- |
|
||||
| value | `RangeValue | null` | The current value (controlled). | - |
|
||||
| defaultValue | `RangeValue | null` | The default value (uncontrolled). | - |
|
||||
| minValue | `DateValue` | The minimum allowed date that a user may select. | - | |
|
||||
| maxValue | `DateValue` | The maximum allowed date that a user may select. | - | |
|
||||
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the time input. | `default` |
|
||||
| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop | `1` | |
|
||||
| focusedValue | `DateValue` | Controls the currently focused date within the calendar. | - | |
|
||||
| defaultFocusedValue | `DateValue` | The date that is focused when the calendar first mounts (uncountrolled). | - | |
|
||||
| calendarWidth | `number` \| `string` | The width to be applied to the calendar component. This value is multiplied by the `visibleMonths` number to determine the total width of the calendar. | `256` |
|
||||
| pageBehavior | `PageBehavior` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | `visible` | |
|
||||
| weekdayStyle | `"narrow" \|"short" \| "long" \| undefined` | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name. | `narrow` | |
|
||||
| allowsNonContiguousRanges | `boolean` | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected. | `false` | |
|
||||
| showMonthAndYearPickers | `boolean` | Whether the label should be crossed out. | `false` | |
|
||||
| isDisabled | `boolean` | Whether the calendar is disabled. | `false` | |
|
||||
| isReadOnly | `boolean` | Whether the calendar value is immutable. | `false` | |
|
||||
| isInvalid | `boolean` | Whether the current selection is invalid according to application logic. | - | |
|
||||
| autoFocus | `boolean` | Whether to automatically focus the calendar when it mounts. | `false` | |
|
||||
| showHelper | `boolean` | Whether to show the description or error message. | `false` | |
|
||||
| showShadow | `boolean` | Whether to show the shadow in the selected dates. | `false` |
|
||||
| isHeaderExpanded | `boolean` | Whether the calendar header is expanded. This is only available if the `showMonthAndYearPickers` prop is set to `true`. | `false` | |
|
||||
| isHeaderDefaultExpanded | `boolean` | Whether the calendar header should be expanded by default.This is only available if the `showMonthAndYearPickers` prop is set to `true`. | `false` | |
|
||||
| topContent | `ReactNode` | Custom content to be included in the top of the calendar. | - | |
|
||||
| bottomContent | `ReactNode` | Custom content to be included in the bottom of the calendar. | - | |
|
||||
| isDateUnavailable | `(date: DateValue) => boolean` | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | - | |
|
||||
| createCalendar | `(calendar: SupportedCalendars) => Calendar \| null` | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all<br> calendars` | |
|
||||
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the field. | - |
|
||||
| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. | - |
|
||||
| hideDisabledDates | `boolean` | Whether to hide the disabled or invalid dates. | `false` |
|
||||
| disableAnimation | `boolean` | Whether to disable the animation of the calendar. | `false` |
|
||||
| classNames | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots. | - | |
|
||||
| Attribute | Type | Description | Default | |
|
||||
|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|---|
|
||||
| value | `RangeValue | null` | The current value (controlled). | - |
|
||||
| defaultValue | `RangeValue | null` | The default value (uncontrolled). | - |
|
||||
| minValue | `DateValue` | The minimum allowed date that a user may select. | - | |
|
||||
| maxValue | `DateValue` | The maximum allowed date that a user may select. | - | |
|
||||
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the time input. | `default` | |
|
||||
| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. | `1` | |
|
||||
| focusedValue | `DateValue` | Controls the currently focused date within the calendar. | - | |
|
||||
| defaultFocusedValue | `DateValue` | The date that is focused when the calendar first mounts (uncountrolled). | - | |
|
||||
| calendarWidth | `number` \| `string` | The width to be applied to the calendar component. This value is multiplied by the `visibleMonths` number to determine the total width of the calendar. | `256` | |
|
||||
| pageBehavior | `PageBehavior` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | `visible` | |
|
||||
| weekdayStyle | `"narrow" \|"short" \| "long" \| undefined` | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name. | `narrow` | |
|
||||
| allowsNonContiguousRanges | `boolean` | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected. | `false` | |
|
||||
| isDisabled | `boolean` | Whether the calendar is disabled. | `false` | |
|
||||
| isReadOnly | `boolean` | Whether the calendar value is immutable. | `false` | |
|
||||
| isInvalid | `boolean` | Whether the current selection is invalid according to application logic. | - | |
|
||||
| autoFocus | `boolean` | Whether to automatically focus the calendar when it mounts. | `false` | |
|
||||
| showHelper | `boolean` | Whether to show the description or error message. | `false` | |
|
||||
| showShadow | `boolean` | Whether to show the shadow in the selected dates. | `false` | |
|
||||
| topContent | `ReactNode` | Custom content to be included in the top of the calendar. | - | |
|
||||
| bottomContent | `ReactNode` | Custom content to be included in the bottom of the calendar. | - | |
|
||||
| isDateUnavailable | `(date: DateValue) => boolean` | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | - | |
|
||||
| createCalendar | `(calendar: SupportedCalendars) => Calendar \| null` | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all<br> calendars` | |
|
||||
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the field. | - | |
|
||||
| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. | - | |
|
||||
| hideDisabledDates | `boolean` | Whether to hide the disabled or invalid dates. | `false` | |
|
||||
| disableAnimation | `boolean` | Whether to disable the animation of the calendar. | `false` | |
|
||||
| classNames | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots. | - | |
|
||||
|
||||
### RangeCalendar Events
|
||||
|
||||
@ -240,7 +237,6 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
|
||||
| ---------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| onFocusChange | `(date: CalendarDate) => void` | Handler that is called when the focused date changes. |
|
||||
| onChange | `(value: RangeValue>) => void` | Handler that is called when the value changes. |
|
||||
| onHeaderExpandedChange | `(isExpanded: boolean) => void` | The event handler for the calendar header expanded state. This is only available if the `showMonthAndYearPickers` prop is set to `true`. |
|
||||
|
||||
#### Supported Calendars
|
||||
|
||||
|
||||
@ -75,7 +75,7 @@ Commands:
|
||||
Initialize a new NextUI project using the `init` command. This sets up your project with the necessary configurations.
|
||||
|
||||
```codeBlock bash
|
||||
nextui init [my-nextui-app-name]
|
||||
nextui init my-nextui-app
|
||||
```
|
||||
|
||||
<Spacer y={4} />
|
||||
@ -90,6 +90,16 @@ You will be prompted to configure your project:
|
||||
A Next.js 13 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.
|
||||
```
|
||||
|
||||
Install the dependencies to start the local server:
|
||||
```codeBlock bash
|
||||
cd my-nextui-app && npm install
|
||||
```
|
||||
|
||||
Start the local server:
|
||||
```codeBlock bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## add
|
||||
|
||||
Add components to your NextUI project with the add command. This command manages component dependencies and updates your project configurations.
|
||||
|
||||
@ -39,7 +39,17 @@ You will be prompted to configure your project:
|
||||
A Next.js 13 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.
|
||||
```
|
||||
|
||||
Once your NextUI project is initialized, you can add individual components using the CLI. For example, to add a button component:
|
||||
Install the dependencies to start the local server:
|
||||
```codeBlock bash
|
||||
cd my-nextui-app && npm install
|
||||
```
|
||||
|
||||
Start the local server:
|
||||
```codeBlock bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Once your NextUI project is ready to develop, you can add individual components using the CLI. For example, to add a button component:
|
||||
|
||||
```codeBlock bash
|
||||
nextui add button
|
||||
|
||||
@ -382,7 +382,6 @@ export const InternationalCalendars = {
|
||||
render: InternationalCalendarsTemplate,
|
||||
args: {
|
||||
...defaultProps,
|
||||
showMonthAndYearPickers: true,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user