diff --git a/docs/api/gallery.md b/docs/api/gallery.md new file mode 100644 index 00000000000..bd8b908a1b9 --- /dev/null +++ b/docs/api/gallery.md @@ -0,0 +1,134 @@ +--- +title: "ion-gallery" +--- + +import Props from '@ionic-internal/component-api/v9/gallery/props.md'; +import Events from '@ionic-internal/component-api/v9/gallery/events.md'; +import Methods from '@ionic-internal/component-api/v9/gallery/methods.md'; +import Parts from '@ionic-internal/component-api/v9/gallery/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/gallery/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/gallery/slots.md'; + + + ion-gallery: Responsive Uniform and Masonry Gallery Layouts + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +The gallery arranges images, cards, and other content in a responsive grid. It supports uniform and masonry layouts, configurable column counts (fixed or breakpoint-based), and multiple masonry ordering modes. + +## Basic Usage + +import Basic from '@site/static/usage/v9/gallery/basic/index.md'; + + + +## Uniform + +Uniform is the default layout. It creates a consistent grid where items appear at the same visual size with a `1 / 1` aspect ratio. This layout is ideal when visual alignment is more important than preserving each item's natural height. + +import Uniform from '@site/static/usage/v9/gallery/uniform/index.md'; + + + +## Masonry + +Masonry preserves each item's natural height and stacks items vertically within each column, creating a staggered layout with minimal gaps. Masonry supports two ordering modes: sequential and best fit. + +:::important +Avoid adding margin to top-level items in a masonry layout, as it can cause incorrect item placement. To add spacing, wrap the content in a child element and apply margin to that wrapper instead. +::: + +### Sequential + +Sequential is the default masonry ordering mode. Items are placed in DOM order, filling columns from left to right. + +import MasonrySequential from '@site/static/usage/v9/gallery/masonry-sequential/index.md'; + + + +### Best Fit + +Best fit places each item in the column with the most available space, helping balance column heights. + +import MasonryBestFit from '@site/static/usage/v9/gallery/masonry-best-fit/index.md'; + + + +### Images + +In masonry layouts, top-level `img` elements are given default styles to ensure consistent rendering. These styles make images fill their container while preserving their aspect ratio and keeping them centered. + +:::note +Images wrapped in other elements (for example, inside a `figure`) do not inherit these defaults. Apply the same styles to the nested `img` if you want matching behavior. +::: + +import Images from '@site/static/usage/v9/gallery/images/index.md'; + + + +## Columns + +Columns can be configured with the `columns` property using either a single number for a fixed column count, or a breakpoint map to change columns across screen sizes. + +If no value is provided, or if an invalid value is used, the gallery falls back to its default responsive column behavior. The default column counts by breakpoint are: + +| Breakpoint | Min Width | Default Columns | +| --- | --- | ---| +| `xs` | `0` | `2` | +| `sm` | `576px` | `3` | +| `md` | `768px` | `4` | +| `lg` | `992px` | `6` | +| `xl` | `1200px` | `8` | +| `xxl` | `1400px` | `10` | + +import Columns from '@site/static/usage/v9/gallery/columns/index.md'; + + + +## Interfaces + +### GalleryBreakpointColumns + +```typescript +interface GalleryBreakpointColumns { + xs?: string | number; + sm?: string | number; + md?: string | number; + lg?: string | number; + xl?: string | number; + xxl?: string | number; +} +``` + +## Types + +### GalleryColumns + +```typescript +type GalleryColumns = GalleryBreakpointColumns | string | number; +``` + +## Properties + + +## Events + + +## Methods + + +## CSS Shadow Parts + + +## CSS Custom Properties + + +## Slots + diff --git a/docs/components.md b/docs/components.md index 4d1b2cf28a2..4ea465990d4 100644 --- a/docs/components.md +++ b/docs/components.md @@ -74,8 +74,8 @@ Ionic apps are made of high-level building blocks called Components, which allow

Floating action buttons are circular buttons that perform a primary action on a screen.

- -

The grid is a powerful mobile-first system for building custom layouts.

+ +

A collection of layout components for building responsive grids and image layouts.

 @@ -87,7 +87,7 @@ Ionic apps are made of high-level building blocks called Components, which allow -

Inputs provides a way for users to enter data in your app.

+

Inputs provide a way for users to enter data in your app.

 diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index 8d9acb8c144..f1d8d197469 100644 --- a/plugins/docusaurus-plugin-ionic-component-api/index.js +++ b/plugins/docusaurus-plugin-ionic-component-api/index.js @@ -54,7 +54,7 @@ module.exports = function (context, options) { await generateMarkdownForVersion(version, npmTag, context.i18n.currentLocale, false); } - let npmTag = 'latest'; + let npmTag = '8.8.6-dev.11777569278.1613db2e'; if (currentVersion.banner === 'unreleased') { npmTag = 'next'; } else if (currentVersion.path !== undefined) { diff --git a/sidebars.js b/sidebars.js index 661395b2463..93fd41dfb79 100644 --- a/sidebars.js +++ b/sidebars.js @@ -336,9 +336,9 @@ module.exports = { }, { type: 'category', - label: 'Grid', + label: 'Grids', collapsed: false, - items: ['api/grid', 'api/col', 'api/row'], + items: ['api/grid', 'api/col', 'api/row', 'api/gallery'], }, { type: 'category', diff --git a/static/code/stackblitz/v9/angular/package-lock.json b/static/code/stackblitz/v9/angular/package-lock.json index 335c0192276..29617c53249 100644 --- a/static/code/stackblitz/v9/angular/package-lock.json +++ b/static/code/stackblitz/v9/angular/package-lock.json @@ -14,8 +14,8 @@ "@angular/platform-browser": "^20.0.0", "@angular/platform-browser-dynamic": "^20.0.0", "@angular/router": "^20.0.0", - "@ionic/angular": "8.7.11", - "@ionic/core": "8.7.11", + "@ionic/angular": "8.8.6-dev.11777569278.1613db2e", + "@ionic/core": "8.8.6-dev.11777569278.1613db2e", "ionicons": "8.0.13", "rxjs": "^7.8.1", "tslib": "^2.5.0", @@ -3217,12 +3217,12 @@ } }, "node_modules/@ionic/angular": { - "version": "8.7.11", - "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.7.11.tgz", + "version": "8.8.6-dev.11777569278.1613db2e", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.8.6-dev.11777569278.1613db2e.tgz", "integrity": "sha512-W2/mmrL/RTwlDrFyOmRukTz6x0DLl905XwVjIIMeGgu/IV3dbHbzHmFj6VwdhdxW13T9kLOrzLqPRri1KQtdCw==", "license": "MIT", "dependencies": { - "@ionic/core": "8.7.11", + "@ionic/core": "8.8.6-dev.11777569278.1613db2e", "ionicons": "^8.0.13", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -3236,8 +3236,8 @@ } }, "node_modules/@ionic/core": { - "version": "8.7.11", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "version": "8.8.6-dev.11777569278.1613db2e", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.6-dev.11777569278.1613db2e.tgz", "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "license": "MIT", "dependencies": { diff --git a/static/code/stackblitz/v9/angular/package.json b/static/code/stackblitz/v9/angular/package.json index ff788c8514e..d2e24e02fe9 100644 --- a/static/code/stackblitz/v9/angular/package.json +++ b/static/code/stackblitz/v9/angular/package.json @@ -15,8 +15,8 @@ "@angular/platform-browser": "^20.0.0", "@angular/platform-browser-dynamic": "^20.0.0", "@angular/router": "^20.0.0", - "@ionic/angular": "8.7.11", - "@ionic/core": "8.7.11", + "@ionic/angular": "8.8.6-dev.11777569278.1613db2e", + "@ionic/core": "8.8.6-dev.11777569278.1613db2e", "ionicons": "8.0.13", "rxjs": "^7.8.1", "tslib": "^2.5.0", diff --git a/static/code/stackblitz/v9/html/package-lock.json b/static/code/stackblitz/v9/html/package-lock.json index d054b91cf01..399b7db96a3 100644 --- a/static/code/stackblitz/v9/html/package-lock.json +++ b/static/code/stackblitz/v9/html/package-lock.json @@ -6,7 +6,7 @@ "": { "name": "html-starter", "dependencies": { - "@ionic/core": "8.7.11", + "@ionic/core": "8.8.6-dev.11777569278.1613db2e", "ionicons": "8.0.13" }, "devDependencies": { @@ -458,8 +458,8 @@ } }, "node_modules/@ionic/core": { - "version": "8.7.11", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "version": "8.8.6-dev.11777569278.1613db2e", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.6-dev.11777569278.1613db2e.tgz", "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "license": "MIT", "dependencies": { diff --git a/static/code/stackblitz/v9/html/package.json b/static/code/stackblitz/v9/html/package.json index 22a2047e413..f3fea5c0d9a 100644 --- a/static/code/stackblitz/v9/html/package.json +++ b/static/code/stackblitz/v9/html/package.json @@ -9,7 +9,7 @@ "start": "vite preview" }, "dependencies": { - "@ionic/core": "8.7.11", + "@ionic/core": "8.8.6-dev.11777569278.1613db2e", "ionicons": "8.0.13" }, "devDependencies": { diff --git a/static/code/stackblitz/v9/react/package-lock.json b/static/code/stackblitz/v9/react/package-lock.json index 5bdf823b03c..f9a7aae4a7a 100644 --- a/static/code/stackblitz/v9/react/package-lock.json +++ b/static/code/stackblitz/v9/react/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-react-typescript", "version": "0.1.0", "dependencies": { - "@ionic/react": "8.7.11", - "@ionic/react-router": "8.7.11", + "@ionic/react": "8.8.6-dev.11777569278.1613db2e", + "@ionic/react-router": "8.8.6-dev.11777569278.1613db2e", "@types/node": "^24.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", @@ -716,8 +716,8 @@ } }, "node_modules/@ionic/core": { - "version": "8.7.11", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "version": "8.8.6-dev.11777569278.1613db2e", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.6-dev.11777569278.1613db2e.tgz", "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "license": "MIT", "dependencies": { @@ -727,12 +727,12 @@ } }, "node_modules/@ionic/react": { - "version": "8.7.11", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.11.tgz", + "version": "8.8.6-dev.11777569278.1613db2e", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.6-dev.11777569278.1613db2e.tgz", "integrity": "sha512-h4j2SVRMgoxZBdr1bluKGrb0xNYEqEDcjHDuHsok669tKH3RnTMfD276zytfhFh3R8gIKWIqxb76NIsW/hfZcQ==", "license": "MIT", "dependencies": { - "@ionic/core": "8.7.11", + "@ionic/core": "8.8.6-dev.11777569278.1613db2e", "ionicons": "^8.0.13", "tslib": "*" }, @@ -742,12 +742,12 @@ } }, "node_modules/@ionic/react-router": { - "version": "8.7.11", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.7.11.tgz", + "version": "8.8.6-dev.11777569278.1613db2e", + "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.8.6-dev.11777569278.1613db2e.tgz", "integrity": "sha512-ZpJxx9WjprNngRaVEUvy1k5S22P0/BNfXNKpqqFci/JDJL5uPArLaevwXAuOzdIf+EknpG+34IIW6PBme5cPAQ==", "license": "MIT", "dependencies": { - "@ionic/react": "8.7.11", + "@ionic/react": "8.8.6-dev.11777569278.1613db2e", "tslib": "*" }, "peerDependencies": { diff --git a/static/code/stackblitz/v9/react/package.json b/static/code/stackblitz/v9/react/package.json index 8b0deae5c16..008be6b69af 100644 --- a/static/code/stackblitz/v9/react/package.json +++ b/static/code/stackblitz/v9/react/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@ionic/react": "8.7.11", - "@ionic/react-router": "8.7.11", + "@ionic/react": "8.8.6-dev.11777569278.1613db2e", + "@ionic/react-router": "8.8.6-dev.11777569278.1613db2e", "@types/node": "^24.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", diff --git a/static/code/stackblitz/v9/vue/package-lock.json b/static/code/stackblitz/v9/vue/package-lock.json index ebf2a96fd89..1dda3eeda19 100644 --- a/static/code/stackblitz/v9/vue/package-lock.json +++ b/static/code/stackblitz/v9/vue/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-vue-starter", "version": "0.0.0", "dependencies": { - "@ionic/vue": "8.7.11", - "@ionic/vue-router": "8.7.11", + "@ionic/vue": "8.8.6-dev.11777569278.1613db2e", + "@ionic/vue-router": "8.8.6-dev.11777569278.1613db2e", "vue": "^3.2.25", "vue-router": "4.6.3" }, @@ -509,8 +509,8 @@ } }, "node_modules/@ionic/core": { - "version": "8.7.11", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "version": "8.8.6-dev.11777569278.1613db2e", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.6-dev.11777569278.1613db2e.tgz", "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "license": "MIT", "dependencies": { @@ -520,23 +520,23 @@ } }, "node_modules/@ionic/vue": { - "version": "8.7.11", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.11.tgz", + "version": "8.8.6-dev.11777569278.1613db2e", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.6-dev.11777569278.1613db2e.tgz", "integrity": "sha512-HDEcjhxWfimVQxvXfghrqlAWpXnJvcUDTIVE2Mvq8ul+s7gL/OZCpXTAODJOfFCBAGJ0o9QXyC7OPjyN4UbO8Q==", "license": "MIT", "dependencies": { - "@ionic/core": "8.7.11", + "@ionic/core": "8.8.6-dev.11777569278.1613db2e", "@stencil/vue-output-target": "0.10.7", "ionicons": "^8.0.13" } }, "node_modules/@ionic/vue-router": { - "version": "8.7.11", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.7.11.tgz", + "version": "8.8.6-dev.11777569278.1613db2e", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.8.6-dev.11777569278.1613db2e.tgz", "integrity": "sha512-6k/bWLORJucLIPYqcrXnSs3KEI69qaWo6V4bGAEOSkt9dISdTy65gafi4gtFFyV+n81LIU00WnajJYLadDG3Cg==", "license": "MIT", "dependencies": { - "@ionic/vue": "8.7.11" + "@ionic/vue": "8.8.6-dev.11777569278.1613db2e" } }, "node_modules/@jridgewell/sourcemap-codec": { diff --git a/static/code/stackblitz/v9/vue/package.json b/static/code/stackblitz/v9/vue/package.json index db6efac6dda..8fe47ceb973 100644 --- a/static/code/stackblitz/v9/vue/package.json +++ b/static/code/stackblitz/v9/vue/package.json @@ -8,8 +8,8 @@ "preview": "vite preview" }, "dependencies": { - "@ionic/vue": "8.7.11", - "@ionic/vue-router": "8.7.11", + "@ionic/vue": "8.8.6-dev.11777569278.1613db2e", + "@ionic/vue-router": "8.8.6-dev.11777569278.1613db2e", "vue": "^3.2.25", "vue-router": "4.6.3" }, diff --git a/static/img/demos/gallery/01.png b/static/img/demos/gallery/01.png new file mode 100644 index 00000000000..f3e49e2a22c Binary files /dev/null and b/static/img/demos/gallery/01.png differ diff --git a/static/img/demos/gallery/02.png b/static/img/demos/gallery/02.png new file mode 100644 index 00000000000..1c82befeb86 Binary files /dev/null and b/static/img/demos/gallery/02.png differ diff --git a/static/img/demos/gallery/03.png b/static/img/demos/gallery/03.png new file mode 100644 index 00000000000..3f454de0a06 Binary files /dev/null and b/static/img/demos/gallery/03.png differ diff --git a/static/img/demos/gallery/04.png b/static/img/demos/gallery/04.png new file mode 100644 index 00000000000..d026972f7e1 Binary files /dev/null and b/static/img/demos/gallery/04.png differ diff --git a/static/img/demos/gallery/05.png b/static/img/demos/gallery/05.png new file mode 100644 index 00000000000..461e1ef0e94 Binary files /dev/null and b/static/img/demos/gallery/05.png differ diff --git a/static/img/demos/gallery/06.png b/static/img/demos/gallery/06.png new file mode 100644 index 00000000000..dfb2ac54caf Binary files /dev/null and b/static/img/demos/gallery/06.png differ diff --git a/static/img/demos/gallery/07.png b/static/img/demos/gallery/07.png new file mode 100644 index 00000000000..a2e9d55ac6e Binary files /dev/null and b/static/img/demos/gallery/07.png differ diff --git a/static/img/demos/gallery/08.png b/static/img/demos/gallery/08.png new file mode 100644 index 00000000000..ce617520d89 Binary files /dev/null and b/static/img/demos/gallery/08.png differ diff --git a/static/img/demos/gallery/09.png b/static/img/demos/gallery/09.png new file mode 100644 index 00000000000..5fa6ee4e75f Binary files /dev/null and b/static/img/demos/gallery/09.png differ diff --git a/static/img/demos/gallery/10.png b/static/img/demos/gallery/10.png new file mode 100644 index 00000000000..fa28d4c1005 Binary files /dev/null and b/static/img/demos/gallery/10.png differ diff --git a/static/img/demos/gallery/11.png b/static/img/demos/gallery/11.png new file mode 100644 index 00000000000..8d2baefd257 Binary files /dev/null and b/static/img/demos/gallery/11.png differ diff --git a/static/img/demos/gallery/12.png b/static/img/demos/gallery/12.png new file mode 100644 index 00000000000..c20056d1579 Binary files /dev/null and b/static/img/demos/gallery/12.png differ diff --git a/static/usage/v9/gallery/basic/angular/example_component_html.md b/static/usage/v9/gallery/basic/angular/example_component_html.md new file mode 100644 index 00000000000..7e51f617d3f --- /dev/null +++ b/static/usage/v9/gallery/basic/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + Gallery + + + + + Image 1 + Image 2 + Image 3 + Image 4 + Image 5 + Image 6 + Image 7 + Image 8 + Image 9 + Image 10 + Image 11 + Image 12 + + +``` diff --git a/static/usage/v9/gallery/basic/angular/example_component_ts.md b/static/usage/v9/gallery/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..c73d7da46c8 --- /dev/null +++ b/static/usage/v9/gallery/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonGallery, 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], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/gallery/basic/demo.html b/static/usage/v9/gallery/basic/demo.html new file mode 100644 index 00000000000..271e6dd9736 --- /dev/null +++ b/static/usage/v9/gallery/basic/demo.html @@ -0,0 +1,55 @@ + + + + + + Gallery + + + + + + + + + + + + + Gallery + + + + + Image 1 + Image 2 + Image 3 + Image 4 + Image 5 + Image 6 + Image 7 + Image 8 + Image 9 + Image 10 + Image 11 + Image 12 + + + + + diff --git a/static/usage/v9/gallery/basic/javascript.md b/static/usage/v9/gallery/basic/javascript.md new file mode 100644 index 00000000000..7e51f617d3f --- /dev/null +++ b/static/usage/v9/gallery/basic/javascript.md @@ -0,0 +1,23 @@ +```html + + + Gallery + + + + + Image 1 + Image 2 + Image 3 + Image 4 + Image 5 + Image 6 + Image 7 + Image 8 + Image 9 + Image 10 + Image 11 + Image 12 + + +``` diff --git a/static/usage/v9/gallery/basic/react.md b/static/usage/v9/gallery/basic/react.md new file mode 100644 index 00000000000..6a3b91dc416 --- /dev/null +++ b/static/usage/v9/gallery/basic/react.md @@ -0,0 +1,33 @@ +```tsx +import React from 'react'; +import { IonContent, IonGallery, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Gallery + + + + + Image 1 + Image 2 + Image 3 + Image 4 + Image 5 + Image 6 + Image 7 + Image 8 + Image 9 + Image 10 + Image 11 + Image 12 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/gallery/basic/vue.md b/static/usage/v9/gallery/basic/vue.md new file mode 100644 index 00000000000..839333dd605 --- /dev/null +++ b/static/usage/v9/gallery/basic/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/gallery/columns/angular/example_component_css.md b/static/usage/v9/gallery/columns/angular/example_component_css.md new file mode 100644 index 00000000000..498dda4370f --- /dev/null +++ b/static/usage/v9/gallery/columns/angular/example_component_css.md @@ -0,0 +1,58 @@ +```css +ion-gallery div { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + border-radius: 16px; +} + +ion-gallery div:nth-child(1) { + background: #ff6b6b; +} + +ion-gallery div:nth-child(2) { + background: #4ecdc4; +} + +ion-gallery div:nth-child(3) { + background: #ffe66d; + color: #333; +} + +ion-gallery div:nth-child(4) { + background: #5f27cd; +} + +ion-gallery div:nth-child(5) { + background: #7f8c8d; +} + +ion-gallery div:nth-child(6) { + background: #ff9f43; +} + +ion-gallery div:nth-child(7) { + background: #ff3f34; +} + +ion-gallery div:nth-child(8) { + background: #2ecc71; +} + +ion-gallery div:nth-child(9) { + background: #34495e; +} + +ion-gallery div:nth-child(10) { + background: #1abc9c; +} + +ion-gallery div:nth-child(11) { + background: #e67e22; +} + +ion-gallery div:nth-child(12) { + background: #9b59b6; +} +``` diff --git a/static/usage/v9/gallery/columns/angular/example_component_html.md b/static/usage/v9/gallery/columns/angular/example_component_html.md new file mode 100644 index 00000000000..baaa5f87dc2 --- /dev/null +++ b/static/usage/v9/gallery/columns/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + +
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+ +``` diff --git a/static/usage/v9/gallery/columns/angular/example_component_ts.md b/static/usage/v9/gallery/columns/angular/example_component_ts.md new file mode 100644 index 00000000000..242a09c72ea --- /dev/null +++ b/static/usage/v9/gallery/columns/angular/example_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component } from '@angular/core'; +import { IonGallery } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonGallery], +}) +export class ExampleComponent { + columns = { + xs: 3, + sm: 6, + md: 8, + lg: 9, + xl: 10, + xxl: 12, + }; +} +``` diff --git a/static/usage/v9/gallery/columns/demo.html b/static/usage/v9/gallery/columns/demo.html new file mode 100644 index 00000000000..6ad02f1ecd3 --- /dev/null +++ b/static/usage/v9/gallery/columns/demo.html @@ -0,0 +1,118 @@ + + + + + + Gallery + + + + + + + + + +
+ +
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+ +
+ + + + + + + + diff --git a/static/usage/v9/gallery/columns/index.md b/static/usage/v9/gallery/columns/index.md new file mode 100644 index 00000000000..b63aa1ed40e --- /dev/null +++ b/static/usage/v9/gallery/columns/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/gallery/columns/javascript.md b/static/usage/v9/gallery/columns/javascript.md new file mode 100644 index 00000000000..b7fd51042df --- /dev/null +++ b/static/usage/v9/gallery/columns/javascript.md @@ -0,0 +1,87 @@ +```html + +
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+ + + + + +``` diff --git a/static/usage/v9/gallery/columns/react/main_css.md b/static/usage/v9/gallery/columns/react/main_css.md new file mode 100644 index 00000000000..498dda4370f --- /dev/null +++ b/static/usage/v9/gallery/columns/react/main_css.md @@ -0,0 +1,58 @@ +```css +ion-gallery div { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + border-radius: 16px; +} + +ion-gallery div:nth-child(1) { + background: #ff6b6b; +} + +ion-gallery div:nth-child(2) { + background: #4ecdc4; +} + +ion-gallery div:nth-child(3) { + background: #ffe66d; + color: #333; +} + +ion-gallery div:nth-child(4) { + background: #5f27cd; +} + +ion-gallery div:nth-child(5) { + background: #7f8c8d; +} + +ion-gallery div:nth-child(6) { + background: #ff9f43; +} + +ion-gallery div:nth-child(7) { + background: #ff3f34; +} + +ion-gallery div:nth-child(8) { + background: #2ecc71; +} + +ion-gallery div:nth-child(9) { + background: #34495e; +} + +ion-gallery div:nth-child(10) { + background: #1abc9c; +} + +ion-gallery div:nth-child(11) { + background: #e67e22; +} + +ion-gallery div:nth-child(12) { + background: #9b59b6; +} +``` diff --git a/static/usage/v9/gallery/columns/react/main_tsx.md b/static/usage/v9/gallery/columns/react/main_tsx.md new file mode 100644 index 00000000000..6233383a50f --- /dev/null +++ b/static/usage/v9/gallery/columns/react/main_tsx.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonGallery } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + +
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/gallery/columns/vue.md b/static/usage/v9/gallery/columns/vue.md new file mode 100644 index 00000000000..de37dfd27a9 --- /dev/null +++ b/static/usage/v9/gallery/columns/vue.md @@ -0,0 +1,90 @@ +```html + + + + + +``` diff --git a/static/usage/v9/gallery/images/angular/example_component_html.md b/static/usage/v9/gallery/images/angular/example_component_html.md new file mode 100644 index 00000000000..ddd9f9274f8 --- /dev/null +++ b/static/usage/v9/gallery/images/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + Gallery + + + + + Image 1 + Image 2 + Image 3 + Image 4 + Image 5 + Image 6 + Image 7 + Image 8 + Image 9 + Image 10 + Image 11 + Image 12 + + +``` diff --git a/static/usage/v9/gallery/images/angular/example_component_ts.md b/static/usage/v9/gallery/images/angular/example_component_ts.md new file mode 100644 index 00000000000..c73d7da46c8 --- /dev/null +++ b/static/usage/v9/gallery/images/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonGallery, 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], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/gallery/images/demo.html b/static/usage/v9/gallery/images/demo.html new file mode 100644 index 00000000000..f3cea74b655 --- /dev/null +++ b/static/usage/v9/gallery/images/demo.html @@ -0,0 +1,55 @@ + + + + + + Gallery + + + + + + + + + + + + + Gallery + + + + + Image 1 + Image 2 + Image 3 + Image 4 + Image 5 + Image 6 + Image 7 + Image 8 + Image 9 + Image 10 + Image 11 + Image 12 + + + + + diff --git a/static/usage/v9/gallery/images/index.md b/static/usage/v9/gallery/images/index.md new file mode 100644 index 00000000000..e5f4f61b5e9 --- /dev/null +++ b/static/usage/v9/gallery/images/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/gallery/images/javascript.md b/static/usage/v9/gallery/images/javascript.md new file mode 100644 index 00000000000..ddd9f9274f8 --- /dev/null +++ b/static/usage/v9/gallery/images/javascript.md @@ -0,0 +1,23 @@ +```html + + + Gallery + + + + + Image 1 + Image 2 + Image 3 + Image 4 + Image 5 + Image 6 + Image 7 + Image 8 + Image 9 + Image 10 + Image 11 + Image 12 + + +``` diff --git a/static/usage/v9/gallery/images/react.md b/static/usage/v9/gallery/images/react.md new file mode 100644 index 00000000000..32b52ddfcf0 --- /dev/null +++ b/static/usage/v9/gallery/images/react.md @@ -0,0 +1,33 @@ +```tsx +import React from 'react'; +import { IonContent, IonGallery, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Gallery + + + + + Image 1 + Image 2 + Image 3 + Image 4 + Image 5 + Image 6 + Image 7 + Image 8 + Image 9 + Image 10 + Image 11 + Image 12 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/gallery/images/vue.md b/static/usage/v9/gallery/images/vue.md new file mode 100644 index 00000000000..923a66b3ab4 --- /dev/null +++ b/static/usage/v9/gallery/images/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/gallery/masonry-best-fit/angular/example_component_css.md b/static/usage/v9/gallery/masonry-best-fit/angular/example_component_css.md new file mode 100644 index 00000000000..d5282ecde3d --- /dev/null +++ b/static/usage/v9/gallery/masonry-best-fit/angular/example_component_css.md @@ -0,0 +1,40 @@ +```css +ion-gallery div { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + border-radius: 16px; +} + +ion-gallery div:nth-child(1) { + background: #ff6b6b; + height: 175px; +} + +ion-gallery div:nth-child(2) { + background: #4ecdc4; + height: 30px; +} + +ion-gallery div:nth-child(3) { + background: #ffe66d; + color: #333; + height: 90px; +} + +ion-gallery div:nth-child(4) { + background: #5f27cd; + height: 50px; +} + +ion-gallery div:nth-child(5) { + background: #7f8c8d; + height: 110px; +} + +ion-gallery div:nth-child(6) { + background: #ff9f43; + height: 175px; +} +``` diff --git a/static/usage/v9/gallery/masonry-best-fit/angular/example_component_html.md b/static/usage/v9/gallery/masonry-best-fit/angular/example_component_html.md new file mode 100644 index 00000000000..1c7b4cbaa3e --- /dev/null +++ b/static/usage/v9/gallery/masonry-best-fit/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + +
1
+
2
+
3
+
4
+
5
+
6
+ +``` diff --git a/static/usage/v9/gallery/masonry-best-fit/angular/example_component_ts.md b/static/usage/v9/gallery/masonry-best-fit/angular/example_component_ts.md new file mode 100644 index 00000000000..7c64c74308d --- /dev/null +++ b/static/usage/v9/gallery/masonry-best-fit/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonGallery } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonGallery], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/gallery/masonry-best-fit/demo.html b/static/usage/v9/gallery/masonry-best-fit/demo.html new file mode 100644 index 00000000000..b7aebd0133a --- /dev/null +++ b/static/usage/v9/gallery/masonry-best-fit/demo.html @@ -0,0 +1,82 @@ + + + + + + Gallery + + + + + + + + + +
+ +
1
+
2
+
3
+
4
+
5
+
6
+ +
+ + + + + + diff --git a/static/usage/v9/gallery/masonry-best-fit/index.md b/static/usage/v9/gallery/masonry-best-fit/index.md new file mode 100644 index 00000000000..7ef8399f794 --- /dev/null +++ b/static/usage/v9/gallery/masonry-best-fit/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/gallery/masonry-best-fit/javascript.md b/static/usage/v9/gallery/masonry-best-fit/javascript.md new file mode 100644 index 00000000000..67b10a42220 --- /dev/null +++ b/static/usage/v9/gallery/masonry-best-fit/javascript.md @@ -0,0 +1,51 @@ +```html + +
1
+
2
+
3
+
4
+
5
+
6
+ + + +``` diff --git a/static/usage/v9/gallery/masonry-best-fit/react/main_css.md b/static/usage/v9/gallery/masonry-best-fit/react/main_css.md new file mode 100644 index 00000000000..d5282ecde3d --- /dev/null +++ b/static/usage/v9/gallery/masonry-best-fit/react/main_css.md @@ -0,0 +1,40 @@ +```css +ion-gallery div { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + border-radius: 16px; +} + +ion-gallery div:nth-child(1) { + background: #ff6b6b; + height: 175px; +} + +ion-gallery div:nth-child(2) { + background: #4ecdc4; + height: 30px; +} + +ion-gallery div:nth-child(3) { + background: #ffe66d; + color: #333; + height: 90px; +} + +ion-gallery div:nth-child(4) { + background: #5f27cd; + height: 50px; +} + +ion-gallery div:nth-child(5) { + background: #7f8c8d; + height: 110px; +} + +ion-gallery div:nth-child(6) { + background: #ff9f43; + height: 175px; +} +``` diff --git a/static/usage/v9/gallery/masonry-best-fit/react/main_tsx.md b/static/usage/v9/gallery/masonry-best-fit/react/main_tsx.md new file mode 100644 index 00000000000..16617e56ddd --- /dev/null +++ b/static/usage/v9/gallery/masonry-best-fit/react/main_tsx.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonGallery } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + +
1
+
2
+
3
+
4
+
5
+
6
+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/gallery/masonry-best-fit/vue.md b/static/usage/v9/gallery/masonry-best-fit/vue.md new file mode 100644 index 00000000000..a6eb0c20d05 --- /dev/null +++ b/static/usage/v9/gallery/masonry-best-fit/vue.md @@ -0,0 +1,57 @@ +```html + + + + + +``` diff --git a/static/usage/v9/gallery/masonry-sequential/angular/example_component_css.md b/static/usage/v9/gallery/masonry-sequential/angular/example_component_css.md new file mode 100644 index 00000000000..d5282ecde3d --- /dev/null +++ b/static/usage/v9/gallery/masonry-sequential/angular/example_component_css.md @@ -0,0 +1,40 @@ +```css +ion-gallery div { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + border-radius: 16px; +} + +ion-gallery div:nth-child(1) { + background: #ff6b6b; + height: 175px; +} + +ion-gallery div:nth-child(2) { + background: #4ecdc4; + height: 30px; +} + +ion-gallery div:nth-child(3) { + background: #ffe66d; + color: #333; + height: 90px; +} + +ion-gallery div:nth-child(4) { + background: #5f27cd; + height: 50px; +} + +ion-gallery div:nth-child(5) { + background: #7f8c8d; + height: 110px; +} + +ion-gallery div:nth-child(6) { + background: #ff9f43; + height: 175px; +} +``` diff --git a/static/usage/v9/gallery/masonry-sequential/angular/example_component_html.md b/static/usage/v9/gallery/masonry-sequential/angular/example_component_html.md new file mode 100644 index 00000000000..3a842806710 --- /dev/null +++ b/static/usage/v9/gallery/masonry-sequential/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + +
1
+
2
+
3
+
4
+
5
+
6
+ +``` diff --git a/static/usage/v9/gallery/masonry-sequential/angular/example_component_ts.md b/static/usage/v9/gallery/masonry-sequential/angular/example_component_ts.md new file mode 100644 index 00000000000..7c64c74308d --- /dev/null +++ b/static/usage/v9/gallery/masonry-sequential/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonGallery } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonGallery], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/gallery/masonry-sequential/demo.html b/static/usage/v9/gallery/masonry-sequential/demo.html new file mode 100644 index 00000000000..4fd4dce7d98 --- /dev/null +++ b/static/usage/v9/gallery/masonry-sequential/demo.html @@ -0,0 +1,82 @@ + + + + + + Gallery + + + + + + + + + +
+ +
1
+
2
+
3
+
4
+
5
+
6
+ +
+ + + + + + diff --git a/static/usage/v9/gallery/masonry-sequential/index.md b/static/usage/v9/gallery/masonry-sequential/index.md new file mode 100644 index 00000000000..7293da2807c --- /dev/null +++ b/static/usage/v9/gallery/masonry-sequential/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/gallery/masonry-sequential/javascript.md b/static/usage/v9/gallery/masonry-sequential/javascript.md new file mode 100644 index 00000000000..3eaa9d50161 --- /dev/null +++ b/static/usage/v9/gallery/masonry-sequential/javascript.md @@ -0,0 +1,51 @@ +```html + +
1
+
2
+
3
+
4
+
5
+
6
+ + + +``` diff --git a/static/usage/v9/gallery/masonry-sequential/react/main_css.md b/static/usage/v9/gallery/masonry-sequential/react/main_css.md new file mode 100644 index 00000000000..d5282ecde3d --- /dev/null +++ b/static/usage/v9/gallery/masonry-sequential/react/main_css.md @@ -0,0 +1,40 @@ +```css +ion-gallery div { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + border-radius: 16px; +} + +ion-gallery div:nth-child(1) { + background: #ff6b6b; + height: 175px; +} + +ion-gallery div:nth-child(2) { + background: #4ecdc4; + height: 30px; +} + +ion-gallery div:nth-child(3) { + background: #ffe66d; + color: #333; + height: 90px; +} + +ion-gallery div:nth-child(4) { + background: #5f27cd; + height: 50px; +} + +ion-gallery div:nth-child(5) { + background: #7f8c8d; + height: 110px; +} + +ion-gallery div:nth-child(6) { + background: #ff9f43; + height: 175px; +} +``` diff --git a/static/usage/v9/gallery/masonry-sequential/react/main_tsx.md b/static/usage/v9/gallery/masonry-sequential/react/main_tsx.md new file mode 100644 index 00000000000..d821b6f6138 --- /dev/null +++ b/static/usage/v9/gallery/masonry-sequential/react/main_tsx.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonGallery } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + +
1
+
2
+
3
+
4
+
5
+
6
+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/gallery/masonry-sequential/vue.md b/static/usage/v9/gallery/masonry-sequential/vue.md new file mode 100644 index 00000000000..58a601a335c --- /dev/null +++ b/static/usage/v9/gallery/masonry-sequential/vue.md @@ -0,0 +1,57 @@ +```html + + + + + +``` diff --git a/static/usage/v9/gallery/uniform/angular/example_component_css.md b/static/usage/v9/gallery/uniform/angular/example_component_css.md new file mode 100644 index 00000000000..2158b41fcd6 --- /dev/null +++ b/static/usage/v9/gallery/uniform/angular/example_component_css.md @@ -0,0 +1,34 @@ +```css +ion-gallery div { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + border-radius: 16px; +} + +ion-gallery div:nth-child(1) { + background: #ff6b6b; +} + +ion-gallery div:nth-child(2) { + background: #4ecdc4; +} + +ion-gallery div:nth-child(3) { + background: #ffe66d; + color: #333; +} + +ion-gallery div:nth-child(4) { + background: #5f27cd; +} + +ion-gallery div:nth-child(5) { + background: #7f8c8d; +} + +ion-gallery div:nth-child(6) { + background: #ff9f43; +} +``` diff --git a/static/usage/v9/gallery/uniform/angular/example_component_html.md b/static/usage/v9/gallery/uniform/angular/example_component_html.md new file mode 100644 index 00000000000..acc52998aea --- /dev/null +++ b/static/usage/v9/gallery/uniform/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + +
1
+
2
+
3
+
4
+
5
+
6
+ +``` diff --git a/static/usage/v9/gallery/uniform/angular/example_component_ts.md b/static/usage/v9/gallery/uniform/angular/example_component_ts.md new file mode 100644 index 00000000000..7c64c74308d --- /dev/null +++ b/static/usage/v9/gallery/uniform/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonGallery } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonGallery], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/gallery/uniform/demo.html b/static/usage/v9/gallery/uniform/demo.html new file mode 100644 index 00000000000..35025b4e6c6 --- /dev/null +++ b/static/usage/v9/gallery/uniform/demo.html @@ -0,0 +1,76 @@ + + + + + + Gallery + + + + + + + + + +
+ +
1
+
2
+
3
+
4
+
5
+
6
+ +
+ + + + + + diff --git a/static/usage/v9/gallery/uniform/index.md b/static/usage/v9/gallery/uniform/index.md new file mode 100644 index 00000000000..3e429dc27ee --- /dev/null +++ b/static/usage/v9/gallery/uniform/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/gallery/uniform/javascript.md b/static/usage/v9/gallery/uniform/javascript.md new file mode 100644 index 00000000000..9dd2f519c30 --- /dev/null +++ b/static/usage/v9/gallery/uniform/javascript.md @@ -0,0 +1,45 @@ +```html + +
1
+
2
+
3
+
4
+
5
+
6
+ + + +``` diff --git a/static/usage/v9/gallery/uniform/react/main_css.md b/static/usage/v9/gallery/uniform/react/main_css.md new file mode 100644 index 00000000000..2158b41fcd6 --- /dev/null +++ b/static/usage/v9/gallery/uniform/react/main_css.md @@ -0,0 +1,34 @@ +```css +ion-gallery div { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + border-radius: 16px; +} + +ion-gallery div:nth-child(1) { + background: #ff6b6b; +} + +ion-gallery div:nth-child(2) { + background: #4ecdc4; +} + +ion-gallery div:nth-child(3) { + background: #ffe66d; + color: #333; +} + +ion-gallery div:nth-child(4) { + background: #5f27cd; +} + +ion-gallery div:nth-child(5) { + background: #7f8c8d; +} + +ion-gallery div:nth-child(6) { + background: #ff9f43; +} +``` diff --git a/static/usage/v9/gallery/uniform/react/main_tsx.md b/static/usage/v9/gallery/uniform/react/main_tsx.md new file mode 100644 index 00000000000..dbab089603e --- /dev/null +++ b/static/usage/v9/gallery/uniform/react/main_tsx.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonGallery } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + +
1
+
2
+
3
+
4
+
5
+
6
+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/gallery/uniform/vue.md b/static/usage/v9/gallery/uniform/vue.md new file mode 100644 index 00000000000..5a10f95dc4d --- /dev/null +++ b/static/usage/v9/gallery/uniform/vue.md @@ -0,0 +1,51 @@ +```html + + + + + +```