logo
English

导航菜单

Documents

PictureBookTextBox

A text container that positions itself by percentage within its parent container and auto-sizes height by content.

Introduction

PictureBookTextBox is a flexible text container that positions itself by percentage within its parent container. It automatically adjusts height based on content and supports various styling options including background blur, rounded corners, and text shadows.

Perfect for creating positioned text overlays on picture book pages with responsive scaling.

Related Component: This component is designed to work within PictureBookPage containers. PictureBookPage provides the fixed aspect ratio foundation, while PictureBookTextBox adds positioned text content that scales responsively within it.

Cases

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

天气真好啊。

Props

backdropBlur

Text box background blur in pixels.

无背景虚化
轻微背景虚化 (2px)
中等背景虚化 (6px)
强烈背景虚化 (12px) 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    paddingPx={12}
    roundedPx={12}>
    无背景虚化
  </PictureBookTextBox>
</PictureBookPage>
无背景虚化
轻微背景虚化 (2px)
中等背景虚化 (6px)
强烈背景虚化 (12px) 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    backdropBlur={2}
    paddingPx={12}
    roundedPx={12}>
    轻微背景虚化 (2px)
  </PictureBookTextBox>
</PictureBookPage>
无背景虚化
轻微背景虚化 (2px)
中等背景虚化 (6px)
强烈背景虚化 (12px) 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    backdropBlur={6}
    paddingPx={12}
    roundedPx={12}>
    中等背景虚化 (6px)
  </PictureBookTextBox>
</PictureBookPage>
无背景虚化
轻微背景虚化 (2px)
中等背景虚化 (6px)
强烈背景虚化 (12px) 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    backdropBlur={12}
    paddingPx={12}
    roundedPx={12}>
    强烈背景虚化 (12px)
  </PictureBookTextBox>
</PictureBookPage>

bg

Preset background supporting: none | paper | muted | primary | secondary | accent | info | success | warning | error.

无背景与模糊
bg="paper"
bg="muted"
bg="primary"
bg="secondary"
bg="accent"
bg="info"
bg="success"
bg="warning"
bg="error" 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox slot="overlay" top={20} left={10} width={80}>
    无背景与模糊
  </PictureBookTextBox>
</PictureBookPage>
无背景与模糊
bg="paper"
bg="muted"
bg="primary"
bg="secondary"
bg="accent"
bg="info"
bg="success"
bg="warning"
bg="error" 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    bg="paper"
  </PictureBookTextBox>
</PictureBookPage>
无背景与模糊
bg="paper"
bg="muted"
bg="primary"
bg="secondary"
bg="accent"
bg="info"
bg="success"
bg="warning"
bg="error" 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="muted"
    paddingPx={10}
    roundedPx={8}>
    bg="muted"
  </PictureBookTextBox>
</PictureBookPage>
无背景与模糊
bg="paper"
bg="muted"
bg="primary"
bg="secondary"
bg="accent"
bg="info"
bg="success"
bg="warning"
bg="error" 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="primary"
    paddingPx={10}
    roundedPx={8}>
    bg="primary"
  </PictureBookTextBox>
</PictureBookPage>
无背景与模糊
bg="paper"
bg="muted"
bg="primary"
bg="secondary"
bg="accent"
bg="info"
bg="success"
bg="warning"
bg="error" 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="secondary"
    paddingPx={10}
    roundedPx={8}>
    bg="secondary"
  </PictureBookTextBox>
</PictureBookPage>
无背景与模糊
bg="paper"
bg="muted"
bg="primary"
bg="secondary"
bg="accent"
bg="info"
bg="success"
bg="warning"
bg="error" 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="accent/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="accent"
    paddingPx={10}
    roundedPx={8}>
    bg="accent"
  </PictureBookTextBox>
</PictureBookPage>
无背景与模糊
bg="paper"
bg="muted"
bg="primary"
bg="secondary"
bg="accent"
bg="info"
bg="success"
bg="warning"
bg="error" 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="info"
    paddingPx={10}
    roundedPx={8}>
    bg="info"
  </PictureBookTextBox>
</PictureBookPage>
无背景与模糊
bg="paper"
bg="muted"
bg="primary"
bg="secondary"
bg="accent"
bg="info"
bg="success"
bg="warning"
bg="error" 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="success"
    paddingPx={10}
    roundedPx={8}>
    bg="success"
  </PictureBookTextBox>
</PictureBookPage>
无背景与模糊
bg="paper"
bg="muted"
bg="primary"
bg="secondary"
bg="accent"
bg="info"
bg="success"
bg="warning"
bg="error" 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="warning"
    paddingPx={10}
    roundedPx={8}>
    bg="warning"
  </PictureBookTextBox>
</PictureBookPage>
无背景与模糊
bg="paper"
bg="muted"
bg="primary"
bg="secondary"
bg="accent"
bg="info"
bg="success"
bg="warning"
bg="error" 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="error"
    paddingPx={10}
    roundedPx={8}>
    bg="error"
  </PictureBookTextBox>
</PictureBookPage>

bottom

Percentage distance from bottom.

bottom = 10%
bottom = 30% 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    bottom={10}
    left={10}
    width={80}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    bottom = 10%
  </PictureBookTextBox>
</PictureBookPage>
bottom = 10%
bottom = 30% 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    bottom={30}
    left={10}
    width={80}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    bottom = 30%
  </PictureBookTextBox>
</PictureBookPage>

fontScaleCqw

Font scale based on container width (cqw units), defaults to 4.

字体缩放 2cqw
字体缩放 6cqw 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="success/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    paddingPx={10}
    roundedPx={8}
    fontScaleCqw={2}>
    字体缩放 2cqw
  </PictureBookTextBox>
</PictureBookPage>
字体缩放 2cqw
字体缩放 6cqw 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="success/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    paddingPx={10}
    roundedPx={8}
    fontScaleCqw={6}>
    字体缩放 6cqw
  </PictureBookTextBox>
</PictureBookPage>

height

Height in percentage.

高度 30%
高度 50% 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="secondary/20">
  <PictureBookTextBox
    slot="overlay"
    top={15}
    left={10}
    width={80}
    height={30}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    高度 30%
  </PictureBookTextBox>
</PictureBookPage>
高度 30%
高度 50% 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="secondary/20">
  <PictureBookTextBox
    slot="overlay"
    top={10}
    left={10}
    width={80}
    height={50}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    高度 50%
  </PictureBookTextBox>
</PictureBookPage>

heightPx

Fixed pixel height. If not set, height adapts to content.

高度 120 像素
高度 200 像素 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={18}
    left={10}
    width={80}
    heightPx={120}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    高度 120 像素
  </PictureBookTextBox>
</PictureBookPage>
高度 120 像素
高度 200 像素 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={18}
    left={10}
    width={80}
    heightPx={200}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    高度 200 像素
  </PictureBookTextBox>
</PictureBookPage>

left

Percentage distance from left.

left = 10%
left = 30% 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={60}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    left = 10%
  </PictureBookTextBox>
</PictureBookPage>
left = 10%
left = 30% 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={30}
    width={60}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    left = 30%
  </PictureBookTextBox>
</PictureBookPage>

paddingCqw

Padding that scales with container width (cqw units).

内边距 2cqw
内边距 4cqw 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="accent/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    paddingCqw={2}
    roundedPx={8}>
    内边距 2cqw
  </PictureBookTextBox>
</PictureBookPage>
内边距 2cqw
内边距 4cqw 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="accent/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    paddingCqw={4}
    roundedPx={8}>
    内边距 4cqw
  </PictureBookTextBox>
</PictureBookPage>

paddingPx

Fixed pixel padding.

圆角 8px，内边距 8px
圆角 16px，内边距 16px 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={22}
    left={12}
    width={76}
    bg="paper"
    paddingPx={8}
    roundedPx={8}>
    圆角 8px，内边距 8px
  </PictureBookTextBox>
</PictureBookPage>
圆角 8px，内边距 8px
圆角 16px，内边距 16px 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={22}
    left={12}
    width={76}
    bg="paper"
    paddingPx={16}
    roundedPx={16}>
    圆角 16px，内边距 16px
  </PictureBookTextBox>
</PictureBookPage>

Percentage distance from right.

right = 10%
right = 30% 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    right={10}
    width={60}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    right = 10%
  </PictureBookTextBox>
</PictureBookPage>
right = 10%
right = 30% 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    right={30}
    width={60}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    right = 30%
  </PictureBookTextBox>
</PictureBookPage>

roundedCqw

Border radius that scales with container width (cqw units).

圆角 2cqw
圆角 4cqw 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="info/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    paddingPx={10}
    roundedCqw={2}>
    圆角 2cqw
  </PictureBookTextBox>
</PictureBookPage>
圆角 2cqw
圆角 4cqw 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="info/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={10}
    width={80}
    bg="paper"
    paddingPx={10}
    roundedCqw={4}>
    圆角 4cqw
  </PictureBookTextBox>
</PictureBookPage>

roundedPx

Fixed pixel border radius.

圆角 8px，内边距 8px
圆角 16px，内边距 16px 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={22}
    left={12}
    width={76}
    bg="paper"
    paddingPx={8}
    roundedPx={8}>
    圆角 8px，内边距 8px
  </PictureBookTextBox>
</PictureBookPage>
圆角 8px，内边距 8px
圆角 16px，内边距 16px 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={22}
    left={12}
    width={76}
    bg="paper"
    paddingPx={16}
    roundedPx={16}>
    圆角 16px，内边距 16px
  </PictureBookTextBox>
</PictureBookPage>

top

Percentage distance from top.

top = 10%
top = 30% 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={10}
    left={20}
    width={60}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    top = 10%
  </PictureBookTextBox>
</PictureBookPage>
top = 10%
top = 30% 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={30}
    left={20}
    width={60}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    top = 30%
  </PictureBookTextBox>
</PictureBookPage>

width

Width in percentage.

width = 40%
width = 70% 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={30}
    width={40}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    width = 40%
  </PictureBookTextBox>
</PictureBookPage>
width = 40%
width = 70% 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={20}
    left={15}
    width={70}
    bg="paper"
    paddingPx={10}
    roundedPx={8}>
    width = 70%
  </PictureBookTextBox>
</PictureBookPage>

zIndex

Text box stacking order, defaults to 10.

zIndex=5（较低）
zIndex=50（更高） 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={30}
    left={12}
    width={76}
    bg="paper"
    paddingPx={10}
    roundedPx={10}
    zIndex={5}>
    zIndex=5（较低）
  </PictureBookTextBox>
</PictureBookPage>
zIndex=5（较低）
zIndex=50（更高） 
---
import { PictureBookPage, PictureBookTextBox } from '@coffic/cosy-ui';
---

<PictureBookPage background="primary/20">
  <PictureBookTextBox
    slot="overlay"
    top={28}
    left={10}
    width={80}
    bg="paper"
    paddingPx={10}
    roundedPx={10}
    zIndex={50}>
    zIndex=50（更高）
  </PictureBookTextBox>
</PictureBookPage>

Slots

default

Default text slot laid out with regular paragraph line-height.

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

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

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

搜索