Inset

应用负边距以允许内容溢出到周围容器。

View source Report an issue View in Playground

排版是安排字体的艺术和技术，以使书面语言在展示时清晰、可读和吸引人。

<Box maxWidth="240px">
	<Card size="2">
		<Inset clip="padding-box" side="top" pb="current">
			<img
				src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
				alt="大胆的排版"
				style={{
					display: "block",
					objectFit: "cover",
					width: "100%",
					height: 140,
					backgroundColor: "var(--gray-5)",
				}}
			/>
		</Inset>
		<Text as="p" size="3">
			<Strong>排版</Strong> 是安排字体的艺术和技术，以使书面语言在展示时清晰、可读和吸引人。
		</Text>
	</Card>
</Box>

API 参考

该组件基于 div 元素，并支持常见边距属性。

Prop	Type	Default
`asChild`	`boolean`	No default value
`side`	`Responsive<enum>`	`"all"`
`clip`	`Responsive<"border-box" \| "padding-box">`	`"border-box"`
`p`	`Responsive<"current" \| "0">`	No default value
`px`	`Responsive<"current" \| "0">`	No default value
`py`	`Responsive<"current" \| "0">`	No default value
`pt`	`Responsive<"current" \| "0">`	No default value
`pr`	`Responsive<"current" \| "0">`	No default value
`pb`	`Responsive<"current" \| "0">`	No default value
`pl`	`Responsive<"current" \| "0">`	No default value

上一篇图标按钮 Icon Button

下一篇弹出框 Popover

在 GitHub 上编辑此页面

概览 Overview

主题 Theme

布局 Layout

排版

组件

通用工具 Utilities

Inset

API 参考