logo
English

导航菜单

Documents

PlaceHolder

Introduction

The PlaceHolder component is used to occupy specified space in layouts, similar to SwiftUI’s Spacer. You can independently set the width and height of the component, supporting different size options and background color configurations.

Cases

Basic

基础占位符

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

---



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>

Multiple Placeholders

---



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

Background color class name, optional values: 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

Whether to show 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

Custom CSS class name for adding additional styles.

自定义样式占位符

自定义样式占位符

---



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

Height size, optional values: 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

Whether to use muted background color.

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

Padding size, optional values: 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

Width size, optional values: 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

Placeholder content, supports any HTML elements.

这是文本内容

🖼️ 图片占位符

标题

这是描述文本

文本内容

占位图

复杂内容

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

---



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

搜索