logo
简体中文

导航菜单

文档

PlaceHolder

简介

PlaceHolder 组件用于在布局中占用指定的空间，类似于 SwiftUI 的 Spacer。可以独立设置组件的宽度和高度，支持不同的尺寸选项和背景色配置。

案例

基础用法

多占位符展示

background

背景色类名，可选值：base-100、base-200、base-300、primary、secondary、accent、info、success、warning、error。

base-100

base-200

base-300

主要背景色 (primary)

次要背景色 (secondary)

强调背景色 (accent)

信息背景色 (info)

成功背景色 (success)

警告背景色 (warning)

错误背景色 (error)

---
/**
 * @component PlaceHolderBackgroundBase
 * @description PlaceHolder 组件基础背景色示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-direction: column; gap: 1rem;">
  <PlaceHolder width="md" height="md" padding="md" background="base-100">
    <p style="text-align: center;">base-100</p>
  </PlaceHolder>

  <PlaceHolder width="md" height="md" padding="md" background="base-200">
    <p style="text-align: center;">base-200</p>
  </PlaceHolder>

  <PlaceHolder width="md" height="md" padding="md" background="base-300">
    <p style="text-align: center;">base-300</p>
  </PlaceHolder>
</div>

base-100

base-200

base-300

主要背景色 (primary)

次要背景色 (secondary)

强调背景色 (accent)

信息背景色 (info)

成功背景色 (success)

警告背景色 (warning)

错误背景色 (error)

---
/**
 * @component PlaceHolderBackgroundTheme
 * @description PlaceHolder 组件主题背景色示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-direction: column; gap: 1rem;">
  <PlaceHolder width="md" height="md" padding="md" background="primary">
    <p style="text-align: center;">主要背景色 (primary)</p>
  </PlaceHolder>

  <PlaceHolder width="md" height="md" padding="md" background="secondary">
    <p style="text-align: center;">次要背景色 (secondary)</p>
  </PlaceHolder>

  <PlaceHolder width="md" height="md" padding="md" background="accent">
    <p style="text-align: center;">强调背景色 (accent)</p>
  </PlaceHolder>
</div>

base-100

base-200

base-300

主要背景色 (primary)

次要背景色 (secondary)

强调背景色 (accent)

信息背景色 (info)

成功背景色 (success)

警告背景色 (warning)

错误背景色 (error)

---
/**
 * @component PlaceHolderBackgroundStatus
 * @description PlaceHolder 组件状态背景色示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-direction: column; gap: 1rem;">
  <PlaceHolder width="md" height="md" padding="md" background="info">
    <p style="text-align: center;">信息背景色 (info)</p>
  </PlaceHolder>

  <PlaceHolder width="md" height="md" padding="md" background="success">
    <p style="text-align: center;">成功背景色 (success)</p>
  </PlaceHolder>

  <PlaceHolder width="md" height="md" padding="md" background="warning">
    <p style="text-align: center;">警告背景色 (warning)</p>
  </PlaceHolder>

  <PlaceHolder width="md" height="md" padding="md" background="error">
    <p style="text-align: center;">错误背景色 (error)</p>
  </PlaceHolder>
</div>

class

自定义 CSS 类名，用于添加额外的样式。

基础占位符

超大尺寸占位符和主要背景色

height

高度尺寸，可选值：none、xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl、full。

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSizeXs
 * @description PlaceHolder 组件 xs 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="xs" height="xs" padding="xs" background="base-300">
  <p style="text-align: center;">xs</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSizeSm
 * @description PlaceHolder 组件 sm 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="sm" height="sm" padding="sm" background="base-300">
  <p style="text-align: center;">sm</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSizeMd
 * @description PlaceHolder 组件 md 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="md" height="md" padding="md" background="base-300">
  <p style="text-align: center;">md</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSizeLg
 * @description PlaceHolder 组件 lg 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="lg" height="lg" padding="lg" background="base-300">
  <p style="text-align: center;">lg</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSizeXl
 * @description PlaceHolder 组件 xl 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="xl" height="xl" padding="xl" background="base-300">
  <p style="text-align: center;">xl</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSize2xl
 * @description PlaceHolder 组件 2xl 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="2xl" height="2xl" padding="xl" background="base-300">
  <p style="text-align: center;">2xl</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSize3xl
 * @description PlaceHolder 组件 3xl 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="3xl" height="3xl" padding="xl" background="base-300">
  <p style="text-align: center;">3xl</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSize4xl
 * @description PlaceHolder 组件 4xl 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="4xl" height="4xl" padding="xl" background="base-300">
  <p style="text-align: center;">4xl</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSize5xl
 * @description PlaceHolder 组件 5xl 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="5xl" height="5xl" padding="xl" background="base-300">
  <p style="text-align: center;">5xl</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSize6xl
 * @description PlaceHolder 组件 6xl 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="6xl" height="6xl" padding="xl" background="base-300">
  <p style="text-align: center;">6xl</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSizeFull
 * @description PlaceHolder 组件 full 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="full" height="full" padding="xl" background="base-300">
  <p style="text-align: center;">full</p>
</PlaceHolder>

padding

内边距大小，可选值：none、xs、sm、md、lg、xl。

无内边距 (none)

超小内边距 (xs)

小内边距 (sm)

中等内边距 (md)

大内边距 (lg)

超大内边距 (xl)

---
/**
 * @component PlaceHolderPaddingNone
 * @description PlaceHolder 组件 none 内边距示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="md" height="md" padding="none" background="base-300">
  <p style="text-align: center;">无内边距 (none)</p>
</PlaceHolder>

无内边距 (none)

超小内边距 (xs)

小内边距 (sm)

中等内边距 (md)

大内边距 (lg)

超大内边距 (xl)

---
/**
 * @component PlaceHolderPaddingXs
 * @description PlaceHolder 组件 xs 内边距示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="md" height="md" padding="xs" background="base-300">
  <p style="text-align: center;">超小内边距 (xs)</p>
</PlaceHolder>

无内边距 (none)

超小内边距 (xs)

小内边距 (sm)

中等内边距 (md)

大内边距 (lg)

超大内边距 (xl)

---
/**
 * @component PlaceHolderPaddingSm
 * @description PlaceHolder 组件 sm 内边距示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="md" height="md" padding="sm" background="base-300">
  <p style="text-align: center;">小内边距 (sm)</p>
</PlaceHolder>

无内边距 (none)

超小内边距 (xs)

小内边距 (sm)

中等内边距 (md)

大内边距 (lg)

超大内边距 (xl)

---
/**
 * @component PlaceHolderPaddingMd
 * @description PlaceHolder 组件 md 内边距示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="md" height="md" padding="md" background="base-300">
  <p style="text-align: center;">中等内边距 (md)</p>
</PlaceHolder>

无内边距 (none)

超小内边距 (xs)

小内边距 (sm)

中等内边距 (md)

大内边距 (lg)

超大内边距 (xl)

---
/**
 * @component PlaceHolderPaddingLg
 * @description PlaceHolder 组件 lg 内边距示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="md" height="md" padding="lg" background="base-300">
  <p style="text-align: center;">大内边距 (lg)</p>
</PlaceHolder>

无内边距 (none)

超小内边距 (xs)

小内边距 (sm)

中等内边距 (md)

大内边距 (lg)

超大内边距 (xl)

---
/**
 * @component PlaceHolderPaddingXl
 * @description PlaceHolder 组件 xl 内边距示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="md" height="md" padding="xl" background="base-300">
  <p style="text-align: center;">超大内边距 (xl)</p>
</PlaceHolder>

width

宽度尺寸，可选值：none、xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl、full。

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSizeXs
 * @description PlaceHolder 组件 xs 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="xs" height="xs" padding="xs" background="base-300">
  <p style="text-align: center;">xs</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSizeSm
 * @description PlaceHolder 组件 sm 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="sm" height="sm" padding="sm" background="base-300">
  <p style="text-align: center;">sm</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSizeMd
 * @description PlaceHolder 组件 md 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="md" height="md" padding="md" background="base-300">
  <p style="text-align: center;">md</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSizeLg
 * @description PlaceHolder 组件 lg 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="lg" height="lg" padding="lg" background="base-300">
  <p style="text-align: center;">lg</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSizeXl
 * @description PlaceHolder 组件 xl 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="xl" height="xl" padding="xl" background="base-300">
  <p style="text-align: center;">xl</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSize2xl
 * @description PlaceHolder 组件 2xl 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="2xl" height="2xl" padding="xl" background="base-300">
  <p style="text-align: center;">2xl</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSize3xl
 * @description PlaceHolder 组件 3xl 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="3xl" height="3xl" padding="xl" background="base-300">
  <p style="text-align: center;">3xl</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSize4xl
 * @description PlaceHolder 组件 4xl 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="4xl" height="4xl" padding="xl" background="base-300">
  <p style="text-align: center;">4xl</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSize5xl
 * @description PlaceHolder 组件 5xl 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="5xl" height="5xl" padding="xl" background="base-300">
  <p style="text-align: center;">5xl</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSize6xl
 * @description PlaceHolder 组件 6xl 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="6xl" height="6xl" padding="xl" background="base-300">
  <p style="text-align: center;">6xl</p>
</PlaceHolder>

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

full

---
/**
 * @component PlaceHolderSizeFull
 * @description PlaceHolder 组件 full 尺寸示例
 */
import { PlaceHolder } from '@coffic/cosy-ui';
---

<PlaceHolder width="full" height="full" padding="xl" background="base-300">
  <p style="text-align: center;">full</p>
</PlaceHolder>

搜索