logo
简体中文

导航菜单

文档

PictureBookTextBox

文本框容器，在父容器中按百分比定位，并根据内容自动调整高度。

简介

PictureBookTextBox 是一个灵活的文本框容器，在父容器中按百分比定位。它根据内容自动调整高度，支持各种样式选项，包括背景虚化、圆角和文字阴影。

完美适用于在绘本页面上创建定位文字覆盖层，支持响应式缩放。

相关组件：此组件设计为在 PictureBookPage 容器内工作。PictureBookPage 提供固定宽高比的基础，而 PictureBookTextBox 添加在其内响应式缩放的定位文字内容。

案例

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

天气真好啊。

Props

backdropBlur

文本框背景虚化像素。

无背景虚化
轻微背景虚化 (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

文本框背景预设，支持：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

文本框距离底部的百分比。

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

基于容器宽度的字体缩放系数（cqw 单位），默认为 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

高度百分比。

高度 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

固定像素高度（不设置时根据内容自适应）。

高度 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

文本框距离左侧的百分比。

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

根据容器宽度同比缩放的内边距（cqw 单位）。

内边距 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

固定像素内边距。

圆角 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>

文本框距离右侧的百分比。

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

根据容器宽度同比缩放的圆角（cqw 单位）。

圆角 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

固定像素圆角。

圆角 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

文本框距离顶部的百分比。

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 = 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

文本框层叠顺序，默认为 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

默认文字内容插槽，采用常规段落行高排版。

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

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

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

搜索