使用优美的组件更快地发布
NextUI Pro

NextUI Provider

有关 NextUIProvider 的 API 参考。

导入

用法

import * as React from "react";
import {NextUIProvider} from "@nextui-org/react";


function App() {
  return (
    <NextUIProvider>
      <YourApplication />
    </NextUIProvider>
  );
}

属性

导航

  • 描述: 为所有嵌套组件（如 Link、Menu、Tabs、Table 等）提供客户端路由。
  • 类型: ((path: string) => void) | undefined

语言环境

  • 描述: 要应用于子组件的语言环境。
  • 类型: string | undefined
  • 默认值: en-US

以下是支持的语言环境。默认情况下，它是 en-US。

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'
];

以下是一个设置西班牙语语言环境的示例。

"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;
}

默认日期

  • 描述: 日历中可以选择默认的日期范围。
  • 类型: { minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }
  • 默认值: { minDate: new CalendarDate(1900, 1, 1), maxDate: new CalendarDate(2099, 12, 31) }

创建日历

  • 描述: 此函数通过提供自定义日历系统来帮助减小捆绑包大小。

    默认情况下，这包括 @internationalized/date 支持的所有日历系统。但是，如果您的应用程序支持更有限的区域集，或者您知道您只会在特定日历系统中选择日期，您可以通过提供自己的 createCalendar 实现来减小捆绑包大小，该实现包括这些日历实现的子集。

    例如，如果您的应用程序只支持公历日期，您可以像这样实现一个 createCalendar 函数

    import {GregorianCalendar} from '@internationalized/date';
    

    function createCalendar(identifier) {
    switch (identifier) {
      case 'gregory':
        return new GregorianCalendar();
      default:
        throw new Error(`Unsupported calendar ${identifier}`);
    }
    }

    这样，只有 GregorianCalendar 被导入，其他日历实现可以被 tree-shaking。

  • 类型: ((calendar: SupportedCalendars) => Calendar | null) | undefined

disableAnimation

  • 描述: 全局禁用动画。这也会避免 framer-motion 特性加载到包中，从而可能减小包大小。
  • 类型: boolean
  • 默认值: false

disableRipple

  • 描述: 全局禁用涟漪效果。
  • 类型: boolean
  • 默认值: false

skipFramerMotionAnimations

  • 描述: 控制是否在应用程序中跳过 framer-motion 动画。当 disableAnimation 属性设置为 true 时，此属性会自动启用 (true)，有效地跳过所有 framer-motion 动画。为了在使用 disableAnimation 属性用于其他目的时保留 framer-motion 动画，请将其设置为 false。但是，请注意，如果 disableAnimation 属性为 true，NextUI 组件中的动画仍然会被省略。
  • 类型: boolean
  • 默认值: 与 disableAnimation 相同

validationBehavior

  • 描述: 是否使用原生 HTML 表单验证来阻止表单提交（当值缺失或无效时），或者通过 ARIA 将字段标记为必填或无效。
  • 类型: native | aria
  • 默认值: aria

类型

CalendarDate

  • 描述: 一个 CalendarDate 代表来自 @internationalized/date 的特定日历系统中的日期，不包含任何时间组件。
  • 类型: import {CalendarDate} from '@internationalized/date';

支持的日历

支持的 react-aria i18n 日历。

type SupportedCalendars =
  | "buddhist"
  | "ethiopic"
  | "ethioaa"
  | "coptic"
  | "hebrew"
  | "indian"
  | "islamic-civil"
  | "islamic-tbla"
  | "islamic-umalqura"
  | "japanese"
  | "persian"
  | "roc"
  | "gregory";
NextUI CLI