logo
简体中文

导航菜单

文档

PictureBookPage

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

简介

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

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

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

案例

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

天气真好啊。

Props

background

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

默认背景色
background="base-100"
background="primary/20"
background="secondary/30"
页面背景
background=[object Object] 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage pageAspectRatio={3 / 4}>
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    paddingPx={12}
    roundedPx={12}>
    默认背景色
  </PictureBookTextBox>
</PictureBookPage>
默认背景色
background="base-100"
background="primary/20"
background="secondary/30"
页面背景
background=[object Object] 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="base-100" pageAspectRatio={3 / 4}>
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    paddingPx={12}
    roundedPx={12}>
    background="base-100"
  </PictureBookTextBox>
</PictureBookPage>
默认背景色
background="base-100"
background="primary/20"
background="secondary/30"
页面背景
background=[object Object] 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20" pageAspectRatio={3 / 4}>
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    paddingPx={12}
    roundedPx={12}>
    background="primary/20"
  </PictureBookTextBox>
</PictureBookPage>
默认背景色
background="base-100"
background="primary/20"
background="secondary/30"
页面背景
background=[object Object] 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="secondary/30" pageAspectRatio={3 / 4}>
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    paddingPx={12}
    roundedPx={12}>
    background="secondary/30"
  </PictureBookTextBox>
</PictureBookPage>
默认背景色
background="base-100"
background="primary/20"
background="secondary/30"
页面背景
background=[object Object] 
---
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="paper"
    paddingPx={12}
    roundedPx={12}>
    background={SampleImage}
  </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="paper"
    paddingPx={12}
    roundedPx={10}>
    默认边框 (true)
  </PictureBookTextBox>
</PictureBookPage>
页面背景
默认边框 (true)
页面背景
无边框 (false)
页面背景
自定义边框色 (primary/50) 
---
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="paper"
    paddingPx={12}
    roundedPx={10}>
    无边框 (false)
  </PictureBookTextBox>
</PictureBookPage>
页面背景
默认边框 (true)
页面背景
无边框 (false)
页面背景
自定义边框色 (primary/50) 
---
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="paper"
    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="paper"
    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="paper"
    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="paper"
    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="paper"
    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="paper"
    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="paper"
    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="paper"
    paddingPx={10}
    roundedPx={8}>
    覆盖层：单个文本框
  </PictureBookTextBox>
</PictureBookPage>
覆盖层：单个文本框
文本框 A
文本框 B 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

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

搜索