logo
简体中文

导航菜单

文档

PictureBookTextBox

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

简介

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

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

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

案例

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

天气真好啊。

Props

backdropBlur

文本框背景虚化像素。

无背景虚化
轻微背景虚化 (2px)
中等背景虚化 (6px)
强烈背景虚化 (12px)
---



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

<PictureBookPage background="primary/90">
    <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="primary/90">
    <PictureBookTextBox
        slot="overlay"
        top={20}
        left={10}
        width={80}
        bg="primary"
        backdropBlur={2}
        paddingPx={12}
        roundedPx={12}>
        轻微背景虚化 (2px)
    </PictureBookTextBox>
</PictureBookPage>

---



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

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

---



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

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

bg

文本框背景预设，支持所有通用背景色。

无背景与模糊
bg="base-100/80"
bg="base-200/70"
bg="primary"
bg="secondary"
bg="accent"
bg="info"
bg="success"
bg="warning"
bg="error"
---



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

<PictureBookPage background="primary/90">
    <PictureBookTextBox slot="overlay" top={20} left={10} width={80}>
        无背景与模糊
    </PictureBookTextBox>
</PictureBookPage>

---



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

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

---



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

<PictureBookPage background="primary/90">
    <PictureBookTextBox
        slot="overlay"
        top={20}
        left={10}
        width={80}
        bg="base-200/70"
        paddingPx={10}
        roundedPx={8}>
        bg="base-200/70"
    </PictureBookTextBox>
</PictureBookPage>

---



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

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

---



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

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

---



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>

---



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

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

---



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

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

---



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

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

---



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

<PictureBookPage background="primary/90">
    <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/90">
    <PictureBookTextBox
        slot="overlay"
        bottom={10}
        left={10}
        width={80}
        bg="primary"
        paddingPx={10}
        roundedPx={8}>
        bottom = 10%
    </PictureBookTextBox>
</PictureBookPage>

---



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

<PictureBookPage background="primary/90">
    <PictureBookTextBox
        slot="overlay"
        bottom={30}
        left={10}
        width={80}
        bg="primary"
        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="primary"
        paddingPx={10}
        roundedPx={8}
        fontScaleCqw={2}>
        字体缩放 2cqw
    </PictureBookTextBox>
</PictureBookPage>

---



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

<PictureBookPage background="success/20">
    <PictureBookTextBox
        slot="overlay"
        top={20}
        left={10}
        width={80}
        bg="primary"
        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="primary"
        paddingPx={10}
        roundedPx={8}>
        高度 30%
    </PictureBookTextBox>
</PictureBookPage>

---



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

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

heightPx

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

高度 120 像素
高度 200 像素
---



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

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

---



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

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

left

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

left = 10%
left = 30%
---



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

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

---



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

<PictureBookPage background="primary/90">
    <PictureBookTextBox
        slot="overlay"
        top={20}
        left={30}
        width={60}
        bg="primary"
        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="primary"
        paddingCqw={2}
        roundedPx={8}>
        内边距 2cqw
    </PictureBookTextBox>
</PictureBookPage>

---



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

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

paddingPx

固定像素内边距。

圆角 8px，内边距 8px
圆角 16px，内边距 16px
---



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

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

---



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

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

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

right = 10%
right = 30%
---



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

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

---



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

<PictureBookPage background="primary/90">
    <PictureBookTextBox
        slot="overlay"
        top={20}
        right={30}
        width={60}
        bg="primary"
        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="primary"
        paddingPx={10}
        roundedCqw={2}>
        圆角 2cqw
    </PictureBookTextBox>
</PictureBookPage>

---



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

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

roundedPx

固定像素圆角。

圆角 8px，内边距 8px
圆角 16px，内边距 16px
---



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

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

---



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

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

top

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

top = 10%
top = 30%
---



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

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

---



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

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

width

文本框宽度的百分比。

width = 40%
width = 70%
---



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

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

---



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

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

zIndex

文本框层叠顺序，默认为 10。

zIndex=5（较低）
zIndex=50（更高）
---



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

<PictureBookPage background="primary/90">
    <PictureBookTextBox
        slot="overlay"
        top={30}
        left={12}
        width={76}
        bg="primary"
        paddingPx={10}
        roundedPx={10}
        zIndex={5}>
        zIndex=5（较低）
    </PictureBookTextBox>
</PictureBookPage>

---



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

<PictureBookPage background="primary/90">
    <PictureBookTextBox
        slot="overlay"
        top={28}
        left={10}
        width={80}
        bg="primary"
        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>

搜索