使用美观的组件更快地交付
NextUI Pro

NextUI Provider

NextUIProvider 的 API 参考。

导入

用法

属性

navigate

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

请参阅 路由指南

useHref

  • 描述: 将链接组件提供的 href 转换为原生 href。 例如，路由器可能接受相对于基本路径的 href，或提供其他自定义方式来指定链接目标。链接上指定的原始 href 会传递给 RouterProvider 的 navigate 函数，useHref 用于生成要放置在实际 DOM 元素上的完整原生 href。
  • 类型: ((href: Href) => string) | undefined

请参阅 路由指南

locale

  • 描述: 应用于子元素的区域设置。
  • 类型: string | undefined
  • 默认值: en-US

以下是支持的区域设置。默认情况下，它是 en-US。

以下是设置西班牙语区域设置的示例。

defaultDates

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

createCalendar

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

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

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

    这样，只会导入 GregorianCalendar，其他日历实现可以进行摇树优化。

  • 类型: ((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

reducedMotion

  • 描述: 控制整个应用程序的运动偏好，允许开发人员遵守用户对减少运动的设置。 可用选项为
    • "user"：适应用户设备的减少运动设置。
    • "always"：禁用所有动画。
    • "never"：保持所有动画处于活动状态。
  • 类型: "user" | "always" | "never"
  • 默认值："never"

类型

CalendarDate

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

支持的日历

支持的 react-aria i18n 日历。

NextUI CLI