--as-wrap - flexbox / Wrap / Reflect UI Wrap Widget Indication Flag

(describing based on figma) Since no major design tool supports wrapping behaviour of the layout, we can use --as-wrap flag to indicate nested autolayout (e.g. row([col([row, row, row]), col([row, row, row])])) as a wrap(item, item, item, item, item, item)

Accepted keys

• --as-wrap

Syntax

`--as-wrap${"="typeof boolean}`
`--as=wrap` // under development (do not use)

Examples

--as-wrap

--as-wrap=true
--as-wrap=false

--as-wrap=yes
--as-wrap=no

----as-wrap

Behavior

Element

• Web - On web, the parent will have flex-wrap property. (flex-wrap: wrap)
• Flutter - On Flutter, the parent will be Tokenized as Wrap Widget.

Summing up.

• flexbox on css
• Wrap on flutter
• Wrap with reflect-ui

Transformed Hierarchy When Wrap being composed, for design, on the item's perspective, it has a 2 parent including the root. But this will be transformed when generated to code. The item must be placed directly under the root Wrap.

As a result, the hierarchy will be transformed as below.

row([col([row, row, row]), col([row, row, row])])) as a wrap(item, item, item, item, item, item)

By this, the "col, col" does not impact any part of the final output code.

For example, if the design is composed as below, the "red" color property held by row 3 will not be read, be interpreted or be applied to the final output code. This is not a bug, It's technically impossible. (Reason: mentioned above)

- autolayout root frame (column) 🔵
  - row 1 (autolayout) ⚪️
  - row 2 (autolayout) ⚪️
  - row 3 (autolayout) 🔴
  - row 4 (autolayout) ⚪️

🔵 = blue
🔴 = red
⚪️ = transparent (no bg)

See also

• No related documents