logo
English

导航菜单

Documents

PictureBookPage

A fixed aspect ratio container that serves as the foundation for picture book pages.

Introduction

PictureBookPage provides a fixed aspect ratio canvas with background support. It’s designed for creating picture book-style pages with consistent proportions and flexible background options.

Great for illustrated pages, reading booklets, and cover layouts.

Related Component: This component is typically used together with PictureBookTextBox to create complete picture book layouts. PictureBookTextBox provides positioned text overlays that work within the PictureBookPage container.

Cases

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

天气真好啊。

Props

background

Page background color or image, supporting all Container component background color configurations.

默认背景色
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

Whether to display a border around the content area. Can be set to true (default black border), false (no border), or a specific color value (e.g., “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

Page aspect ratio (width/height), defaults to 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

Page corner radius size, defaults to ‘xl’. Available options: ‘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

Default content slot for placing text boxes and other content.

这是默认插槽的简单文本，按行高自动排版。
在这里展示较长的文本内容。默认插槽中的文本采用常规段落排版。 
---
import { PictureBookPage } from '@coffic/cosy-ui';
---

<PictureBookPage background="accent/80">
  这是默认插槽的简单文本，按行高自动排版。
</PictureBookPage>
这是默认插槽的简单文本，按行高自动排版。
在这里展示较长的文本内容。默认插槽中的文本采用常规段落排版。 
---
import { PictureBookPage } from '@coffic/cosy-ui';
---

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

overlay

Overlay slot positioned relative to the safe area, for PictureBookTextBox, decorations, etc.

覆盖层：单个文本框
文本框 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>

搜索