[{"value":"预览","id":"预览","hLevel":2,"level":1},{"value":"示例代码","id":"示例代码","hLevel":2,"level":1},{"value":"InlineLayoutProps","id":"inlinelayoutprops","hLevel":2,"level":1,"children":[{"value":"columns?","id":"columns","hLevel":3,"level":2},{"value":"inlineAlignment?","id":"inlinealignment","hLevel":3,"level":2},{"value":"blockAlignment?","id":"blockalignment","hLevel":3,"level":2},{"value":"spacing?","id":"spacing","hLevel":3,"level":2},{"value":"padding?","id":"padding","hLevel":3,"level":2}]},{"value":"类型说明","id":"类型说明","hLevel":2,"level":1,"children":[{"value":"BlockAlignment","id":"blockalignment-1","hLevel":3,"level":2},{"value":"InlineAlignment","id":"inlinealignment-1","hLevel":3,"level":2},{"value":"Spacing","id":"spacing-1","hLevel":3,"level":2},{"value":"Columns","id":"columns-1","hLevel":3,"level":2},{"value":"GridItemSize","id":"griditemsize","hLevel":3,"level":2},{"value":"MaybeResponsiveConditionalStyle","id":"mayberesponsiveconditionalstyle","hLevel":3,"level":2},{"value":"ConditionalStyle","id":"conditionalstyle","hLevel":3,"level":2},{"value":"ConditionalValue","id":"conditionalvalue","hLevel":3,"level":2},{"value":"Conditions","id":"conditions","hLevel":3,"level":2},{"value":"ViewportSizeCondition","id":"viewportsizecondition","hLevel":3,"level":2},{"value":"AtLeastOne","id":"atleastone","hLevel":3,"level":2},{"value":"ViewportInlineSize","id":"viewportinlinesize","hLevel":3,"level":2},{"value":"MaybeShorthandProperty","id":"maybeshorthandproperty","hLevel":3,"level":2},{"value":"ShorthandProperty","id":"shorthandproperty","hLevel":3,"level":2}]}]

InlineLayout

InlineLayout 用于在多列上布局内容。默认情况下，所有列的大小相同并填充可用的行内空间。当未显式设置足够的列时，内容不会换行，而是将它们添加为新列并填充剩余的内联空间。

预览

示例代码

render('Checkout::Dynamic::Render', (props) => {
  return (
    <View border="base">
      <View>
        <Text size="extraExtraLarge">InlineLayoutDemo</Text>
      </View>
      <InlineLayout spacing="tight" columns={[64, 'fill', 'auto']}>
        <Text>InlineLayoutDemo1</Text>
        <Text>InlineLayoutDemo1</Text>
        <Text>InlineLayoutDemo1</Text>
      </InlineLayout>
      <InlineLayout
        spacing="extraTight"
        blockAlignment="center"
        columns={['auto', 'auto', 'auto', 'auto']}
        >
        <Text>InlineLayoutDemo2</Text>
        <Text>InlineLayoutDemo2</Text>
        <Text>InlineLayoutDemo2</Text>
        <Text>InlineLayoutDemo2</Text>
      </InlineLayout>
      <InlineLayout columns={['fill', 'auto']} blockAlignment="center" spacing="tight">
        <Text>InlineLayoutDemo3</Text>
        <Text>InlineLayoutDemo3</Text>
      </InlineLayout>
      <InlineLayout columns={['auto', 'auto']} blockAlignment="center" spacing="tight">
        <Text>InlineLayoutDemo4</Text>
        <Text>InlineLayoutDemo4</Text>
      </InlineLayout>
    </View>
  );
});

InlineLayoutProps

提示

标注 ? 的属性为可选，未标注 ? 的属性为必选。

columns?

MaybeResponsiveConditionalStyle<Columns>

显示列数。

inlineAlignment?

MaybeResponsiveConditionalStyle<InlineAlignment>

主轴对齐方式，主轴为行内轴。

blockAlignment?

MaybeResponsiveConditionalStyle<BlockAlignment>

副轴对齐，副轴为网格区域内的块向轴。

spacing?

MaybeResponsiveConditionalStyle<Spacing | [Spacing, Spacing]> 默认值：base

项目之间的间距。

padding?

MaybeResponsiveConditionalStyle<MaybeShorthandProperty<Spacing>>

内边距。

类型说明

BlockAlignment

start center end baseline

InlineAlignment

start center end

Spacing

none base extraTight tight loose extraLoose

Columns

GridItemSize[] GridItemSize

GridItemSize

auto fill number ${number}fr ${number}%

auto：由内容撑开，不会主动填满剩余空间。
${number}fr：均分剩余空间，number 表示占其中的几份。
fill：像 1fr 一样填满空间，但内容超长时能收缩到 0，防止溢出。
number：按照配置的值进行内容空间分配，如配置 30 则占据 30px。
${number}%：按照配置的百分比进行内容空间的占位，如配置 30% 则占据内容空间的 30%。

MaybeResponsiveConditionalStyle

T | ConditionalStyle<T, ViewportSizeCondition>

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

ConditionalStyle

{ defaultValue?: T; conditionals: ConditionalValue<T, Conditions>[] }

ConditionalValue

{ conditions: Conditions; value: T }

Conditions

AtLeastOne<ViewportSizeCondition>

ViewportSizeCondition

{ viewportInlineSize: { min: T } }

AtLeastOne

Partial<T> & U[keyof U]

ViewportInlineSize

extraSmall small medium large

参考视口断点。

MaybeShorthandProperty

T | ShorthandProperty<T>

ShorthandProperty

[T, T] [T, T, T, T]

这篇文章对你有帮助吗？

SHOPLINE

条款协议

InlineLayout​

预览​

示例代码​

InlineLayoutProps​

columns?​

inlineAlignment?​

blockAlignment?​

spacing?​

padding?​

类型说明​

BlockAlignment​

InlineAlignment​

Spacing​

Columns​

GridItemSize​

MaybeResponsiveConditionalStyle​

ConditionalStyle​

ConditionalValue​

Conditions​

ViewportSizeCondition​

AtLeastOne​

ViewportInlineSize​

MaybeShorthandProperty​

ShorthandProperty​