流血

应用负边距，使内容渗出到周围的布局中。

α

该组件是一项正在进行的工作，并已准备好进行探索性使用，预计在小版本更新中会有破坏性更改。请谨慎使用。进一步了解我们的组件生命周期．

内容将水平地渗透到周围的布局中marginInline道具。

进口反应从“反应”;进口{流血，盒子，文本，HorizontalStack｝从“@shopify /北极星”;函数BleedHorizontalExample（）{返回（<盒子背景=“bg”borderWidth=“1”borderColor=“border-subdued”填充=“8”><流血marginInline=“8”><占位符标签=“marginInline”/></流血></盒子>）;｝常量占位符=（{标签=”，高度=“汽车”，宽度=“汽车”｝）= >{返回（<div风格={{背景：“var(——p-color-text-info)”，填充：“14 px var(——p-space-2)”，高度：高度，宽度：宽度，｝｝><HorizontalStack差距=“4”对齐=“中心”><div风格={{颜色：“var(——p-color-text-on-color)”，｝｝><文本作为=“氢气”变体=“bodyMd”fontWeight=“普通”>{标签｝</文本></div></HorizontalStack></div>）;｝;

道具

想让这个功能变得更好吗?请分享你的反馈．

接口 BleedProps

孩子们？反应．ReactNode
marginInline？ T| {[断点在BreakpointsAlias] ?：T;｝<SpaceScale>: 儿童周围的负水平空间。
marginBlock？ T| {[断点在BreakpointsAlias] ?：T;｝<SpaceScale>: 儿童周围的垂直空间为负。
marginBlockOB欧宝娱乐APPStart？ T| {[断点在BreakpointsAlias] ?：T;｝<SpaceScale>: 儿童周围的顶部空间为负。
marginBlockEnd？ T| {[断点在BreakpointsAlias] ?：T;｝<SpaceScale>: 儿童周围的负底部空间。
marginInlineOB欧宝娱乐APPStart？ T| {[断点在BreakpointsAlias] ?：T;｝<SpaceScale>: 儿童周围的负左空间。
marginInlineEnd？ T| {[断点在BreakpointsAlias] ?：T;｝<SpaceScale>: 儿童周围的负右空间。

流血的价值观

内容不应该超出父容器的边缘。选择在包含布局内工作的出血值。

流血道具的命名遵循CSS逻辑属性的约定，比如“margin-inline-start”和“margin-block-start”。OB欧宝娱乐APP了解更多关于CSS逻辑属性．

流血

α

道具

流血的价值观

相关资源