BoundaryBlock 边界区块

内容边界处理组件，用于处理加载中、空数据、错误等边界状态。

安装

npm

yarn

pnpm

bun

deno

npx shadcn@latest add https://codebase.anyask.dev/r/boundary-block.json

基础用法

组件支持 loading、empty、error 三种边界状态，通过设置对应 prop 即可切换显示。

尺寸

small

default

行内模式

inline 模式仅在错误状态下生效，显示简洁的内联错误提示，适合在文字或行内区块中使用。

骨架屏模式

通过 skeleton prop 启用骨架屏模式，此时 loading 状态下会显示骨架屏而非 Spin，且子元素会被阻塞不渲染。

API

BoundaryBlock

属性	说明	类型	默认值
loading	是否显示加载中状态	`boolean`	`-`
error	错误对象	`Error`	`-`
errorComponent	自定义错误组件	`ReactNode`	`-`
empty	是否显示空状态	`boolean`	`-`
emptyText	空状态文本	`ReactNode`	`-`
emptyComponent	自定义空状态组件	`ReactNode`	`-`
refresh	点击重试的回调	`() => void`	`-`
header	头部内容	`ReactNode`	`-`
children	子元素	`ReactNode`	`-`
size	尺寸模式	`"small" \| "default" \| "inline"`	`-`
wrapperClassName	Spin 包裹层类名	`string`	`-`
loadingClassName	loading 状态类名	`string`	`-`
errorClassName	error 状态类名	`string`	`-`
emptyClassName	empty 状态类名	`string`	`-`
loadingComponent	自定义 loading 组件	`ReactNode`	`-`
skeleton	骨架屏模式	`boolean`	`-`