StyleHelper​

StyleHelper is a utility tool designed for defining conditional values for component property styles. You can write complex conditional styles concisely based on one or more conditions, such as viewport size.

StyleHelper methods​

Example​

The following example demonstrates how the View component responsively adjusts its layout based on viewport breakpoints: when the viewport width is greater than small, the layout switches from a single column to a double column.

<Grid
  rows={['1fr', 'auto']}
  columns={StyleHelper.default(['1fr'])
    .when(
      {
        viewportInlineSize: {
          min: 'extraSmall',
        },
      },
      ['1fr'],
    )
    .when(
      {
        viewportInlineSize: {
          min: 'small',
        },
      },
      ['1fr'],
    )
    .when(
      {
        viewportInlineSize: {
          min: 'medium',
        },
      },
      ['1fr', '1fr'],
    )
    .when(
      {
        viewportInlineSize: {
          min: 'large',
        },
      },
      ['1fr', '1fr'],
    )}
  spacing="loose"
  padding="loose"
>
  <View>View1</View>
  <View>View2</View>
  <View>View3</View>
  <View>View4</View>
</Grid>

Type descriptions​

Conditions​

Conditional styling supports the following conditions.

Multiple conditions can be set within the same when method.

ConditionalStyle​

ConditionalValue​

Viewport breakpoints​

Viewport breakpoints are critical criteria for evaluating conditions. When the viewport width falls within the following ranges, the corresponding value will be triggered. For example, when the viewport width is 450px, StyleHelper will recognize it as the base breakpoint.

• base: 0px ≤ viewport width < 580px
• extraSmall: 580px ≤ viewport width < 750px
• small: 750px ≤ viewport width < 1000px
• medium: 1000px ≤ viewport width < 1200px
• large: viewport width ≥ 1200px