Skip to content

docs(gallery): add documentation for new gallery component#4484

Open
brandyscarney wants to merge 14 commits intomajor-9.0from
FW-7287
Open

docs(gallery): add documentation for new gallery component#4484
brandyscarney wants to merge 14 commits intomajor-9.0from
FW-7287

Conversation

@brandyscarney
Copy link
Copy Markdown
Member

@brandyscarney brandyscarney commented Apr 30, 2026

⚠️ All instances of the dev build must be removed or updated before merging. ⚠️

Adds documentation & playgrounds for the new ion-gallery component.

Preview

Note: when opening the basic usage or masonry images examples in StackBlitz the img URL must be changed from https://ionicframework.com/ to https://ionic-docs-git-fw-7287-ionic1.vercel.app to load the images.

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 30, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-docs Ready Ready Preview, Comment May 1, 2026 7:00pm

Request Review

Comment thread docs/components.md
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I chose to add this under "Grids" because otherwise we would need to redo the component page to either add a new image for a top-level Gallery section or to add something like "Layout" which would reorder a few of them. I can change this if we want to categorize this differently.

}

let npmTag = 'latest';
let npmTag = '8.8.6-dev.11777569278.1613db2e';
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to actually merge this with a dev build otherwise the docs build will fail since Gallery only exists on the dev build.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't love this location of images used by the demos but other demos use this as well so I followed the existing structure.

</ion-header>
<ion-content class="ion-padding">
<ion-gallery>
<img src="https://ionicframework.com/docs/img/demos/gallery/01.png" alt="Image 1" />
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am following how other demos include images because the only other way to pass them to StackBlitz is using base64 encoding.

@brandyscarney brandyscarney marked this pull request as ready for review May 1, 2026 19:15
@brandyscarney brandyscarney requested a review from a team as a code owner May 1, 2026 19:15
@brandyscarney brandyscarney removed the request for review from a team May 1, 2026 19:15
@brandyscarney brandyscarney requested a review from OS-jacobbell May 1, 2026 19:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant