Skip to content

Commit

Permalink
Layout fractional sizes & flexBasis
Browse files Browse the repository at this point in the history
<img width="238" alt="Screenshot 2024-10-24 at 1 37 24 PM" src="https://github.com/user-attachments/assets/a18eb07b-3bbe-47c4-b4d5-94bd18e87a28">

This adds support for 2 things:

1. Fractional values when using fill scale type. This allows sibling layouts to vary their sizes when compared to each other. This ONLY applies on the main axis (for example, only width if the main axis is row).

https://github.com/user-attachments/assets/d617f8d0-142a-499f-a1cf-226fd136ab41

2. Initial size (flex basis). Allows you to set auto which will cause a sibling layout to grow/shrink based on the size of its contents, and also pixel/percent values which prevent growing/shrinking based on its contents, but also will size the layout on top of the initial size value. For example, if you have 3 children all set to fill with 1fr width in a parent thats 300px wide, they would each be 100px. But if you set one of them with flex basis of 100px, it starts that child at 100px, then divides the remaining space up between all 3 children so they end up being 167, 67, 67.

An example of using auto is @LauraRive's planets example where hovering a layout causes it to expand (even though the size was not explicitly set).

An example of using pixel/percent addresses @JcToon's loader example where the sibling loaders set to fill should NOT change size as the size of their child layouts changes.

https://github.com/user-attachments/assets/2ef4f5cd-ff53-4eda-8d72-5a3dd898ac33

Diffs=
aec431eeb7 Layout fractional sizes & flexBasis (#8405)
  • Loading branch information
philter committed Oct 26, 2024
1 parent 91427b5 commit 04ddbc0
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion .rive_head
Original file line number Diff line number Diff line change
@@ -1 +1 @@
a02ac789ca472a5ac72bb3f0a5585fd3f243f095
aec431eeb783ebd88e86d95b45788ab6263d286c

0 comments on commit 04ddbc0

Please sign in to comment.