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
Multiple Placeholders
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>
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
Custom CSS class name for adding additional styles.
基础占位符
超大尺寸占位符和主要背景色
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
---
/**
* @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
Padding size, optional values: 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
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
---
/**
* @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>