页面

Page 用于显示页面的内容

import { Page } from "narraleaf-react";
<Page id="about">
    {/* 这些元素将被显示 */}
    {/* 您的内容 */}
</Page>

Props

id

页面的唯一标识符

  • 类型: string

children

页面的内容

  • 类型: React.ReactNode

className

页面的类名

  • 类型: string

style

页面的 CSS 样式

  • 类型: React.CSSProperties

...rest

继承自 HTMLMotionProps<"div">

您可以向页面传递 motion 属性
此 motion 行为由 Motion (opens in a new tab) 提供

  • 类型: HTMLMotionProps<"div">

例如,您可以在页面之间添加过渡效果

<Page
    id="about"
 
    // Motion 属性
    initial={{ opacity: 0 }}
    animate={{ opacity: 1, transition: { duration: 1 } }}
    exit={{ opacity: 0, transition: { duration: 1 } }}
>
    ...
</Page>