feat(gallery): add new gallery component#31101
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
package: core
There was a problem hiding this comment.
I updated this because this rule prevented the images in my assets/ directory from being served on Vercel.
| // -------------------------------------------------- | ||
|
|
||
| :host(.gallery-layout-uniform) { | ||
| gap: var(--ion-gallery-gap, 16px); |
There was a problem hiding this comment.
Gap currently can only be changed by CSS. Should this be a property that can be updated based on breakpoint, like columns?
There was a problem hiding this comment.
Yes, I lean towards it especially seeing that Chakra does that. I do wonder if we should split it into row-gap and column-gap but we can cross that bridge if we get a request for it so gap works for me.
There was a problem hiding this comment.
Added support for gap here: d494fab
I think if we wanted to support column & row we could just make it accept two values rather than doing two separate properties. I don't know, something to consider later.
|
|
||
| await page.setContent( | ||
| ` | ||
| <ion-gallery style="--internal-gallery-columns: 2;"> |
There was a problem hiding this comment.
Overriding the internal CSS variable for columns should have no effect since the columns property takes priority.
| // Reset the default margin for slotted elements so wrapper elements | ||
| // (such as <figure>) align properly with other gallery items. | ||
| ::slotted(*) { | ||
| @include margin(0); |
There was a problem hiding this comment.
This is required to be here because if the user wraps the img in something with default margin (like figure) it will not properly align the element, even if they override the margin on their side. I will have to document that the top-level item in a gallery should not have margin to avoid issues with this.
| printIonWarning( | ||
| `[ion-gallery] - Invalid "columns" value (${JSON.stringify( | ||
| columns | ||
| )}). Expected a positive integer or breakpoint map object (e.g. { xs: 2, md: 4 }). Falling back to default responsive columns.`, |
There was a problem hiding this comment.
I wonder if it would be beneficial to display what the default responsive columns are so the dev can see it.
There was a problem hiding this comment.
It looks kind of messy but I can add it:
Lmk if you still want it.
| const columnsStr = styles.getPropertyValue('--internal-gallery-columns'); | ||
| // Fallback to 2 columns for masonry calculations when the resolved | ||
| // --internal-gallery-columns CSS value is missing or unparsable. | ||
| const columns = parseInt(columnsStr, 10) || 2; |
There was a problem hiding this comment.
Do you think themes would want to define the fallback value instead of using 2?
| * placed in the DOM. When `best-fit`, items are positioned under the column | ||
| * with the most available space. | ||
| */ | ||
| @Prop({ reflect: true }) order: 'sequential' | 'best-fit' = 'sequential'; |
There was a problem hiding this comment.
Let's give a warning if dev uses layout="uniform with order.
…herit aspect-ratio
2 participants
Issue number: internal
What is the current behavior?
Developers who want to use a masonry layout must rely on third-party solutions or implement their own.
What is the new behavior?
Adds a new
ion-gallerycomponent.Features
layoutproperty:uniform- evenly sized grid rowsmasonry- stacked masonry layoutorderproperty (masonryonly):sequential- preserves DOM orderbest-fit- places items in the shortest columncolumnsproperty:xs,sm,md,lg,xl,xxl)Test Coverage
columnsfallback and normalization caseslayoutwatcher, masonry scheduling, and load-event behaviororderplacement logic (sequentialandbest-fit)Does this introduce a breaking change?
Other information
Basic Preview
Layout Preview
Dev build:
8.8.6-dev.11777668103.132817bd