View

The View component is a universal container that maintains its internal content at its original size without forcibly stretching it. This component is particularly useful within layout components (such as Grid, BlockStack, InlineLayout) to prevent unexpected distortion of child components due to automatic size adjustments by layout components.

Preview​

Code example​

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

ViewProps​

display?​

The alignment direction.

maxBlockSize?​

The maximum vertical size.

maxInlineSize?​

The maximum horizontal size.

minBlockSize?​

The minimum vertical size.

minInlineSize?​

The minimum horizontal size.

opacity?​

The opacity of the component.

overflow?​

Manages content overflow.

border?​

The border style.

cornerRadius?​

The corner radius size.

padding?​

Configures the inner padding.

borderWidth?​

Specifies the border width. Requires the border to be enabled first. Supports a custom numeric value, such as 20.

backgroundColor​

The background color. Supports custom color values, for example:

• Color Names: 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​

The border color. Requires the border to be enabled first. Supports custom color values, for example:

• Color Names: 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)

Type descriptions​

Display​

• block: Aligns the component vertically.
• inline: Aligns the component horizontally.

Sizing​

Opacity​

Overflow​

• hidden: Hides content that overflows the component bounds.
• visible: Allows content to overflow and remain visible.

BorderStyle​

• base: Solid border.
• dotted: Dashed border.
• none: No border.

CornerRadius​

Spacing​

BorderWidth​

MaybeResponsiveConditionalStyle​

• Example of a plain value: base
• Example of a conditional value: { defaultValue: 'tight', conditionals: [{ conditions: { viewportInlineSize: { min: 'medium' } }, value: 'loose' }] }

ConditionalStyle​

ConditionalValue​

Conditions​

ViewportSizeCondition​

AtLeastOne​

ViewportInlineSize​

Refer to Viewport breakpoints.

MaybeShorthandProperty​

ShorthandProperty​