[{"value":"StyleHelper 方法","id":"stylehelper-方法","hLevel":2,"level":1},{"value":"样例","id":"样例","hLevel":2,"level":1},{"value":"类型说明","id":"类型说明","hLevel":2,"level":1,"children":[{"value":"Conditions","id":"conditions","hLevel":3,"level":2},{"value":"ConditionalStyle","id":"conditionalstyle","hLevel":3,"level":2},{"value":"ConditionalValue","id":"conditionalvalue","hLevel":3,"level":2}]},{"value":"视口断点","id":"视口断点","hLevel":2,"level":1}]

StyleHelper

这是一个用于编写组件属性样式条件值的辅助工具。你可以根据一个或多个条件（例如视口大小）以简洁明了的方式编写复杂的条件样式。

StyleHelper 方法

方法		描述
`default`	`<T>(defaultValue: T) => ConditionalStyle<T, Conditions>`	设置默认样式值，当没有其他条件满足时使用。
`when`	`<T>(conditions: Conditions, value: T) => ConditionalStyle<T, Conditions>`	为组件样式添加条件规则。所有条件（以对象形式表示）都必须满足，才能应用相应的值。 `when` 方法可以链式调用，以构建更复杂的样式。

样例

根据当前视口断点来实现 View 组件的分栏效果（当大于 small 时为两行）。

<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>

类型说明

Conditions

条件样式支持以下条件。

可以在同一个when方法上设置多个条件。

名称	类型	描述
`viewportInlineSize`	`{min: "extraSmall" \| "small" \| "medium" \| "large"}`	配置当前的视口断点值，当设备匹配到对应值时，满足此条件。

ConditionalStyle

名称	类型	描述
`conditionals`	`ConditionalValue<T, AcceptedConditions>[]`	条件值数组。
`default`	`T`	当条件中指定的条件值都不满足时应用默认值。