-
Notifications
You must be signed in to change notification settings - Fork 3.2k
docs(gallery): add documentation for new gallery-item component #4544
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: major-9.0
Are you sure you want to change the base?
Changes from all commits
ad8e400
3d93560
7a2a1e7
524f322
6803088
02bfab0
dac322d
e5c198c
188bea7
c4e6159
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| --- | ||
| title: "ion-gallery-item" | ||
| --- | ||
|
|
||
| import Props from '@ionic-internal/component-api/v9/gallery-item/props.md'; | ||
| import Events from '@ionic-internal/component-api/v9/gallery-item/events.md'; | ||
| import Methods from '@ionic-internal/component-api/v9/gallery-item/methods.md'; | ||
| import Parts from '@ionic-internal/component-api/v9/gallery-item/parts.md'; | ||
| import CustomProps from '@ionic-internal/component-api/v9/gallery-item/custom-props.mdx'; | ||
| import Slots from '@ionic-internal/component-api/v9/gallery-item/slots.md'; | ||
|
|
||
| <head> | ||
| <title>ion-gallery-item: Gallery Cell for Text, Images, and Cards</title> | ||
| <meta | ||
| name="description" | ||
| content="ion-gallery-item wraps the content for a single cell in an ion-gallery, such as an image, card, or text. Read to learn more about gallery item usage." | ||
| /> | ||
| </head> | ||
|
|
||
| import EncapsulationPill from '@components/page/api/EncapsulationPill'; | ||
|
|
||
| <EncapsulationPill type="shadow" /> | ||
|
|
||
| Gallery Item is a child component of [Gallery](./gallery.md). It wraps the content for a single cell of the grid. The content can be plain text or any element, including an `img`, a `figure` with a caption, or a [Card](./card.md). | ||
|
|
||
| Gallery Items must be placed inside a Gallery, which arranges them and applies layout-specific styling to each item, such as a square aspect ratio in the uniform layout. | ||
|
|
||
| Refer to the [Gallery](./gallery.md) documentation for more information. | ||
|
|
||
| ## Properties | ||
| <Props /> | ||
|
|
||
| ## Events | ||
| <Events /> | ||
|
|
||
| ## Methods | ||
| <Methods /> | ||
|
|
||
| ## CSS Shadow Parts | ||
| <Parts /> | ||
|
|
||
| ## CSS Custom Properties | ||
| <CustomProps /> | ||
|
|
||
| ## Slots | ||
| <Slots /> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,12 @@ | ||
| ```ts | ||
| import { Component } from '@angular/core'; | ||
| import { IonContent, IonGallery, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; | ||
| import { IonContent, IonGallery, IonGalleryItem, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-example', | ||
| templateUrl: 'example.component.html', | ||
| styleUrls: ['example.component.css'], | ||
| imports: [IonContent, IonGallery, IonHeader, IonTitle, IonToolbar], | ||
| imports: [IonContent, IonGallery, IonGalleryItem, IonHeader, IonTitle, IonToolbar], | ||
| }) | ||
| export class ExampleComponent {} | ||
| ``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note: this file has conflicts with
major-9.0that I am purposely not resolving right now because it uses an Ionic Angular version that supports Angular 21 but my dev build is off a different branch and it will not work with Angular 21.