View

View 是一个通用的容器组件，它能让其内部内容保持原始大小，不会被强制拉伸。该组件在布局组件（如 Grid、BlockStack、InlineLayout）中非常适用，可以避免布局组件自动调整子组件大小带来的意外变形。

预览​

示例代码​

render('Checkout::Dynamic::Render', (props) => {
  return (
    <View border="base">
        View
    </View>
  );
});

ViewProps​

display?​

排列方向。

maxBlockSize?​

最大纵向尺寸。

maxInlineSize?​

最大横向尺寸。

minBlockSize?​

最小纵向尺寸。

minInlineSize?​

最小横向尺寸。

opacity?​

透明度。

overflow?​

内容溢出控制。

border?​

边框样式。

cornerRadius?​

圆角。

padding?​

内边距。

borderWidth?​

边框宽度（需要先开启边框 border），支持自定义宽度如 20。

backgroundColor​

支持输入自定义背景颜色，如：

• 颜色名称：red
• Hex：#FF0000
• RGB：rgb(255, 0, 0)
• RGBA：rgba(255, 0, 0, 0.5)
• HSL：hsl(0, 100%, 50%)
• HSLA：hsla(0, 100%, 50%, 0.5)

borderColor​

支持输入自定义边框颜色（需要先开启边框 border），如：

• 颜色名称：red
• Hex：#FF0000
• RGB：rgb(255, 0, 0)
• RGBA：rgba(255, 0, 0, 0.5)
• HSL：hsl(0, 100%, 50%)
• HSLA：hsla(0, 100%, 50%, 0.5)

类型说明​

Display​

• block：纵向排列
• inline：横向排列

Sizing​

Opacity​

Overflow​

• hidden：溢出内容隐藏
• visible：溢出内容可见

BorderStyle​

• base：实线边框
• dotted：虚线边框
• none：无边框

CornerRadius​

Spacing​

BorderWidth​

MaybeResponsiveConditionalStyle​

• 普通值示例：base
• 条件值示例：{ defaultValue: 'tight', conditionals: [{ conditions: { viewportInlineSize: { min: 'medium' } }, value: 'loose' }] }

ConditionalStyle​

ConditionalValue​

Conditions​

ViewportSizeCondition​

AtLeastOne​

ViewportInlineSize​

参考 视口断点。

MaybeShorthandProperty​

ShorthandProperty​