logo
简体中文

导航菜单

文档

PictureBookPage

固定宽高比的页面容器，作为绘本页面的基础。

简介

PictureBookPage 提供固定宽高比的画布容器，支持背景设置。专为创建具有一致比例和灵活背景选项的绘本风格页面而设计。

适用于课程插画页、阅读绘本页、讲义封面等场景。

相关组件：此组件通常与 PictureBookTextBox 一起使用，创建完整的绘本布局。PictureBookTextBox 提供在 PictureBookPage 容器内工作的定位文字覆盖层。

案例

页面背景
欢迎来到象彩彩的故事世界。象彩彩可不是小象，她是一只可爱的小猫咪。
页面背景
我是樱樱，这里是我的故事世界，来和我一起冒险吧。
页面背景

天气真好啊。

Props

background

页面背景色或图片，支持所有 Container 组件的背景色配置。

默认背景色
background="base-100"
background="primary/20"
background="secondary/30"
页面背景
background=[object Object]
页面背景
background="https://picsum.photos/800/600"
---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage pageAspectRatio={3 / 4}>
    <PictureBookTextBox
        slot="overlay"
        top={20}
        left={10}
        width={80}
        bg="primary"
        paddingPx={12}
        roundedPx={12}>
        默认背景色
    </PictureBookTextBox>
</PictureBookPage>

---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage background="base-100" pageAspectRatio={3 / 4}>
    <PictureBookTextBox
        slot="overlay"
        top={20}
        left={10}
        width={80}
        bg="primary"
        paddingPx={12}
        roundedPx={12}>
        background="base-100"
    </PictureBookTextBox>
</PictureBookPage>

---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage background="primary/20" pageAspectRatio={3 / 4}>
    <PictureBookTextBox
        slot="overlay"
        top={20}
        left={10}
        width={80}
        bg="primary"
        paddingPx={12}
        roundedPx={12}>
        background="primary/20"
    </PictureBookTextBox>
</PictureBookPage>

---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage background="secondary/30" pageAspectRatio={3 / 4}>
    <PictureBookTextBox
        slot="overlay"
        top={20}
        left={10}
        width={80}
        bg="primary"
        paddingPx={12}
        roundedPx={12}>
        background="secondary/30"
    </PictureBookTextBox>
</PictureBookPage>

---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
import SampleImage from "@/assets/hero.png";
---

<PictureBookPage background={SampleImage} pageAspectRatio={3 / 4}>
    <PictureBookTextBox
        slot="overlay"
        top={20}
        left={10}
        width={80}
        bg="primary"
        paddingPx={12}
        roundedPx={12}>
        background={SampleImage}
    </PictureBookTextBox>
</PictureBookPage>

---
import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage background="https://picsum.photos/800/600" pageAspectRatio={3 / 4}>
    <PictureBookTextBox
        slot="overlay"
        top={20}
        left={10}
        width={80}
        bg="primary"
        paddingPx={12}
        roundedPx={12}>
        background="https://picsum.photos/800/600"
    </PictureBookTextBox>
</PictureBookPage>

border

是否在内容区域显示边框。可设置为 true（默认黑色边框）、false（无边框）或具体的颜色值（如 “primary/50”、“success”、“gray-300” 等）。

页面背景
默认边框 (true)
页面背景
无边框 (false)
页面背景
自定义边框色 (primary/50)
---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
import PictureBookBg1 from "@/assets/picture-book-bg.svg";
---

<PictureBookPage
    background={PictureBookBg1}
    pageAspectRatio={3 / 4}
    border={true}>
    <PictureBookTextBox
        slot="overlay"
        top={12}
        left={10}
        width={80}
        bg="primary"
        paddingPx={12}
        roundedPx={10}>
        默认边框 (true)
    </PictureBookTextBox>
</PictureBookPage>

---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
import PictureBookBg2 from "@/assets/picture-book-bg-2.svg";
---

<PictureBookPage
    background={PictureBookBg2}
    pageAspectRatio={3 / 4}
    border={false}>
    <PictureBookTextBox
        slot="overlay"
        top={24}
        left={10}
        width={80}
        bg="primary"
        paddingPx={12}
        roundedPx={10}>
        无边框 (false)
    </PictureBookTextBox>
</PictureBookPage>

---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
import PictureBookBg3 from "@/assets/picture-book-bg-3.svg";
---

<PictureBookPage
    background={PictureBookBg3}
    pageAspectRatio={3 / 4}
    border="primary/50">
    <PictureBookTextBox
        slot="overlay"
        top={24}
        left={10}
        width={85}
        bg="primary"
        paddingPx={12}
        roundedPx={10}>
        自定义边框色 (primary/50)
    </PictureBookTextBox>
</PictureBookPage>

pageAspectRatio

页面宽高比（宽/高），默认为 3/4。

---



import { PictureBookPage } from "@coffic/cosy-ui";
---

<PictureBookPage pageAspectRatio={1 / 1} background="primary/20" />

---



import { PictureBookPage } from "@coffic/cosy-ui";
---

<PictureBookPage pageAspectRatio={1 / 2} background="primary/20" />

---



import { PictureBookPage } from "@coffic/cosy-ui";
---

<PictureBookPage pageAspectRatio={2 / 3} background="primary/20" />

---



import { PictureBookPage } from "@coffic/cosy-ui";
---

<PictureBookPage pageAspectRatio={3 / 4} background="primary/20" />

---



import { PictureBookPage } from "@coffic/cosy-ui";
---

<PictureBookPage pageAspectRatio={4 / 3} background="primary/20" />

---



import { PictureBookPage } from "@coffic/cosy-ui";
---

<PictureBookPage pageAspectRatio={16 / 9} background="primary/20" />

---



import { PictureBookPage } from "@coffic/cosy-ui";
---

<PictureBookPage pageAspectRatio={21 / 9} background="primary/20" />

rounded

页面圆角大小，默认为 ‘xl’。可选值：‘none’、‘sm’、‘md’、‘lg’、‘xl’、‘full’。

无圆角
小圆角
中等圆角
大圆角
超大圆角
完全圆角
---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage rounded="none" pageAspectRatio={3 / 4} background="base-100">
    <PictureBookTextBox
        slot="overlay"
        top={8}
        left={50}
        width={48}
        bg="primary"
        paddingPx={12}
        roundedPx={12}>
        无圆角
    </PictureBookTextBox>
</PictureBookPage>

---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage rounded="sm" pageAspectRatio={3 / 4} background="base-100">
    <PictureBookTextBox
        slot="overlay"
        top={8}
        left={50}
        width={48}
        bg="primary"
        paddingPx={12}
        roundedPx={12}>
        小圆角
    </PictureBookTextBox>
</PictureBookPage>

---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage rounded="md" pageAspectRatio={3 / 4} background="base-100">
    <PictureBookTextBox
        slot="overlay"
        top={8}
        left={50}
        width={48}
        bg="primary"
        paddingPx={12}
        roundedPx={12}>
        中等圆角
    </PictureBookTextBox>
</PictureBookPage>

---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage rounded="lg" pageAspectRatio={3 / 4} background="base-100">
    <PictureBookTextBox
        slot="overlay"
        top={8}
        left={50}
        width={48}
        bg="primary"
        paddingPx={12}
        roundedPx={12}>
        大圆角
    </PictureBookTextBox>
</PictureBookPage>

---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage rounded="xl" pageAspectRatio={3 / 4} background="base-100">
    <PictureBookTextBox
        slot="overlay"
        top={8}
        left={50}
        width={48}
        bg="primary"
        paddingPx={12}
        roundedPx={12}>
        超大圆角
    </PictureBookTextBox>
</PictureBookPage>

---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage rounded="full" pageAspectRatio={3 / 4} background="base-100">
    <PictureBookTextBox
        slot="overlay"
        top={8}
        left={50}
        width={48}
        bg="primary"
        paddingPx={12}
        roundedPx={12}>
        完全圆角
    </PictureBookTextBox>
</PictureBookPage>

Slots

default

默认内容插槽，用于放置文本框和其他内容。

这是默认插槽的简单文本，按行高自动排版。
在这里展示较长的文本内容。默认插槽中的文本采用常规段落排版。
---



import { PictureBookPage } from "@coffic/cosy-ui";
---

<PictureBookPage background="accent/80">
  这是默认插槽的简单文本，按行高自动排版。
</PictureBookPage>

---



import { PictureBookPage } from "@coffic/cosy-ui";
---

<PictureBookPage background="accent/90">
  在这里展示较长的文本内容。默认插槽中的文本采用常规段落排版。
</PictureBookPage>

overlay

覆盖层插槽，相对安全区域定位，可放置 PictureBookTextBox、装饰等。

覆盖层：单个文本框
文本框 A
文本框 B
---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage background="accent/20">
    <PictureBookTextBox
        slot="overlay"
        top={20}
        left={10}
        width={80}
        bg="primary"
        paddingPx={10}
        roundedPx={8}>
        覆盖层：单个文本框
    </PictureBookTextBox>
</PictureBookPage>

---



import { PictureBookPage, PictureBookTextBox } from "@coffic/cosy-ui";
---

<PictureBookPage background="accent/20">
    <PictureBookTextBox
        slot="overlay"
        top={18}
        left={10}
        width={38}
        bg="primary"
        paddingPx={10}
        roundedPx={8}>
        文本框 A
    </PictureBookTextBox>
    <PictureBookTextBox
        slot="overlay"
        top={18}
        right={10}
        width={38}
        bg="primary"
        paddingPx={10}
        roundedPx={8}>
        文本框 B
    </PictureBookTextBox>
</PictureBookPage>

搜索