logo
简体中文

导航菜单

文档

PlaceHolder

简介

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

案例

基础用法

基础占位符

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

---



import { Grid, PlaceHolder } from "@coffic/cosy-ui";
---
<Grid>
  <PlaceHolder width="full" height="lg" background="primary" />
  <PlaceHolder width="full" height="lg" background="secondary" />
  <PlaceHolder width="full" height="lg" background="accent" />
</Grid>

<template>
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <PlaceHolder width="md" height="md" padding="md">
      <p style="text-align: center;">基础占位符</p>
    </PlaceHolder>

    <PlaceHolder width="xl" height="xl" padding="xl" background="primary">
      <p style="text-align: center; color: white;">超大尺寸占位符和主要背景色</p>
    </PlaceHolder>
  </div>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>

多占位符展示

---



import { Grid, PlaceHolder } from "@coffic/cosy-ui";
---

<Grid cols={4}>
  <PlaceHolder width="full" height="sm" background="info" />
  <PlaceHolder width="full" height="sm" background="success" />
  <PlaceHolder width="full" height="sm" background="warning" />
  <PlaceHolder width="full" height="sm" background="error" />
</Grid>

<template>
  <div style="display: flex; gap: 1rem;">
    <PlaceHolder width="xs" height="xs" background="base-200" />
    <PlaceHolder width="sm" height="sm" background="base-300" />
    <PlaceHolder width="md" height="md" background="primary" />
    <PlaceHolder width="lg" height="lg" background="secondary" />
    <PlaceHolder width="xl" height="xl" background="accent" />
  </div>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>

Props

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>

---



/**
 * @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>

---



/**
 * @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>

<template>
  <PlaceHolder width="md" height="md" background="base-200">
    <p style="text-align: center;">基础背景色</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="md" height="md" background="primary">
    <p style="text-align: center; color: white;">主题背景色</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <PlaceHolder width="md" height="md" background="success">
      <p style="text-align: center; color: white;">成功状态</p>
    </PlaceHolder>

    <PlaceHolder width="md" height="md" background="warning">
      <p style="text-align: center; color: white;">警告状态</p>
    </PlaceHolder>

    <PlaceHolder width="md" height="md" background="error">
      <p style="text-align: center; color: white;">错误状态</p>
    </PlaceHolder>
  </div>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>

border

是否显示边框。

No Border
With Border
No Border
With Border
---



import { PlaceHolder } from "@coffic/cosy-ui";
---

<PlaceHolder width="md" height="md"> No Border </PlaceHolder>

---



import { PlaceHolder } from "@coffic/cosy-ui";
---

<PlaceHolder border width="md" height="md"> With Border </PlaceHolder>

<template>
  <PlaceHolder width="md" height="md"> No Border </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>

<template>
  <PlaceHolder border width="md" height="md"> With Border </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>

class

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

自定义样式占位符

自定义样式占位符

---



/**
 * @component PlaceHolderCustomClass
 * @description PlaceHolder 组件自定义 class 示例
 */
import { PlaceHolder } from "@coffic/cosy-ui";
---

<PlaceHolder width="md" height="md" class="custom-placeholder-style">
    <p>自定义样式占位符</p>
</PlaceHolder>

<style>
    .custom-placeholder-style {
        border: 2px dashed #f0f0f0;
        background-color: #f9f9f9;
        color: #666;
        font-style: italic;
    }
</style>

<template>
  <PlaceHolder width="md" height="md" class="custom-placeholder-style">
    <p>自定义样式占位符</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>

<style scoped>
.custom-placeholder-style {
  border: 2px dashed #f0f0f0;
  background-color: #f9f9f9;
  color: #666;
  font-style: italic;
}
</style>

height

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

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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

<template>
  <PlaceHolder width="xs" height="xs">
    <p style="text-align: center;">xs</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="sm" height="sm">
    <p style="text-align: center;">sm</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="md" height="md">
    <p style="text-align: center;">md</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="lg" height="lg">
    <p style="text-align: center;">lg</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="xl" height="xl">
    <p style="text-align: center;">xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="2xl" height="2xl">
    <p style="text-align: center;">2xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="3xl" height="3xl">
    <p style="text-align: center;">3xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="4xl" height="4xl">
    <p style="text-align: center;">4xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="5xl" height="5xl">
    <p style="text-align: center;">5xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="6xl" height="6xl">
    <p style="text-align: center;">6xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="full" height="full">
    <p style="text-align: center;">full</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>

muted

是否使用柔和色背景。

Normal Content

Should appear normal

Muted Content

Should appear disabled

Normal Content

Should appear normal

Muted Content

Should appear disabled
---



import { PlaceHolder } from "@coffic/cosy-ui";
---

<PlaceHolder width="md" height="md">
    <div>
        <p>Normal Content</p>
        <span>Should appear normal</span>
    </div>
</PlaceHolder>

---



import { PlaceHolder } from "@coffic/cosy-ui";
---

<PlaceHolder muted width="md" height="md">
    <div>
        <p>Muted Content</p>
        <span>Should appear disabled</span>
    </div>
</PlaceHolder>

<template>
  <PlaceHolder width="md" height="md">
    <div>
      <p>Normal Content</p>
      <span>Should appear normal</span>
    </div>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>

<template>
  <PlaceHolder muted width="md" height="md">
    <div>
      <p>Muted Content</p>
      <span>Should appear disabled</span>
    </div>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>

padding

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

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

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

<template>
  <PlaceHolder width="md" height="md" padding="none">
    <p style="text-align: center;">none</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="md" height="md" padding="xs">
    <p style="text-align: center;">xs</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="md" height="md" padding="sm">
    <p style="text-align: center;">sm</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="md" height="md" padding="md">
    <p style="text-align: center;">md</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="md" height="md" padding="lg">
    <p style="text-align: center;">lg</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="md" height="md" padding="xl">
    <p style="text-align: center;">xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>

width

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

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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

---



/**
 * @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>

<template>
  <PlaceHolder width="xs" height="xs">
    <p style="text-align: center;">xs</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="sm" height="sm">
    <p style="text-align: center;">sm</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="md" height="md">
    <p style="text-align: center;">md</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="lg" height="lg">
    <p style="text-align: center;">lg</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="xl" height="xl">
    <p style="text-align: center;">xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="2xl" height="2xl">
    <p style="text-align: center;">2xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="3xl" height="3xl">
    <p style="text-align: center;">3xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="4xl" height="4xl">
    <p style="text-align: center;">4xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="5xl" height="5xl">
    <p style="text-align: center;">5xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="6xl" height="6xl">
    <p style="text-align: center;">6xl</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="full" height="full">
    <p style="text-align: center;">full</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>

Slots

default

占位符内容，支持任意 HTML 元素。

这是文本内容

🖼️ 图片占位符

标题

这是描述文本

文本内容

占位图

复杂内容

这是一个包含多个元素的复杂内容示例

---



/**
 * @component PlaceHolderSlotText
 * @description PlaceHolder 组件文本内容 slot 示例
 */
import { PlaceHolder } from "@coffic/cosy-ui";
---

<PlaceHolder width="lg" height="md" padding="md" background="base-200">
  <p style="text-align: center; margin: 0; color: #666;">这是文本内容</p>
</PlaceHolder>

---



/**
 * @component PlaceHolderSlotImage
 * @description PlaceHolder 组件图片内容 slot 示例
 */
import { PlaceHolder } from "@coffic/cosy-ui";
---

<PlaceHolder width="2xl" height="2xl" padding="sm" background="gradient-sky">
  <div
    style="width: 100%; height: 100%; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
    🖼️ 图片占位符
  </div>
</PlaceHolder>

---



/**
 * @component PlaceHolderSlotButton
 * @description PlaceHolder 组件按钮内容 slot 示例
 */
import { PlaceHolder } from "@coffic/cosy-ui";
---

<PlaceHolder width="md" height="sm" padding="sm" background="primary">
  <button
    style="background: white; color: #3b82f6; border: none; padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; cursor: pointer;">
    点击按钮
  </button>
</PlaceHolder>

---



/**
 * @component PlaceHolderSlotComplex
 * @description PlaceHolder 组件复杂内容 slot 示例
 */
import { PlaceHolder } from "@coffic/cosy-ui";
---

<PlaceHolder width="xl" height="lg" padding="lg" background="base-100">
  <div style="text-align: center;">
    <h3 style="margin: 0 0 0.5rem 0; color: #1f2937; font-size: 1.25rem;">
      标题
    </h3>
    <p style="margin: 0 0 1rem 0; color: #6b7280; font-size: 0.875rem;">
      这是描述文本
    </p>
    <div style="display: flex; gap: 0.5rem; justify-content: center;">
      <button
        style="background: #3b82f6; color: white; border: none; padding: 0.375rem 0.75rem; border-radius: 0.25rem; font-size: 0.875rem; cursor: pointer;">
        确认
      </button>
      <button
        style="background: #e5e7eb; color: #374151; border: none; padding: 0.375rem 0.75rem; border-radius: 0.25rem; font-size: 0.875rem; cursor: pointer;">
        取消
      </button>
    </div>
  </div>
</PlaceHolder>

<template>
  <PlaceHolder width="md" height="md" background="base-200">
    <p style="text-align: center;">文本内容</p>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="md" height="md" background="base-200">
    <img src="https://placehold.co/100" alt="占位图" class="cosy:w-full cosy:h-full cosy:object-cover" />
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="md" height="md" background="base-200">
    <button class="cosy:btn cosy:btn-primary">按钮</button>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>
<template>
  <PlaceHolder width="md" height="md" background="base-200">
    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
      <h3 style="margin: 0;">复杂内容</h3>
      <p style="margin: 0;">这是一个包含多个元素的复杂内容示例</p>
      <button class="cosy:btn cosy:btn-sm cosy:btn-primary">操作按钮</button>
    </div>
  </PlaceHolder>
</template>

<script setup lang="ts">
import { PlaceHolder } from "@coffic/cosy-ui/vue";
</script>

搜索