HeroUI 提供者

HeroUIProvider 的 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，其他日历实现可以被 tree-shaken（摇树优化）。

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

labelPlacement

  • 描述: 确定标签应出现的位置，例如在组件的内部、外部或左侧外部。
  • 类型: string | undefined
  • 可能的值: inside | outside | outside-left | undefined
  • 默认值: undefined

spinnerVariant

  • 描述: 加载指示器（spinner）的默认变体。
  • 类型: string | undefined
  • 可能的值: default | simple | gradient | wave | dots | spinner
  • 默认值: default

disableAnimation

  • 描述: 全局禁用动画。这也将避免 framer-motion 功能被加载到捆绑包中，这可能会减少捆绑包大小。
  • 类型: boolean
  • 默认值: false

disableRipple

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

skipFramerMotionAnimations

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

validationBehavior

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

reducedMotion

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

类型

CalendarDate

  • 描述: CalendarDate 表示来自 @internationalized/date 的特定日历系统中没有任何时间成分的日期。
  • 类型: import {CalendarDate} from '@internationalized/date';

SupportedCalendars

支持的 react-aria i18n 日历。

HeroUI CLI