diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md index 77ef73f041c..21b640a3b54 100644 --- a/docs/api/thumbnail.md +++ b/docs/api/thumbnail.md @@ -1,11 +1,6 @@ --- title: "ion-thumbnail" -hide_table_of_contents: true -demoUrl: "/docs/demos/api/thumbnail/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/thumbnail/index.html" --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; import Props from '@site/static/auto-generated/thumbnail/props.md'; import Events from '@site/static/auto-generated/thumbnail/events.md'; @@ -20,153 +15,30 @@ import Slots from '@site/static/auto-generated/thumbnail/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; -import APITOCInline from '@components/page/api/APITOCInline'; -

Contents

- - - - - Thumbnails are square components that usually wrap an image or icon. They can be used to make it easier to display a group of larger images or provide a preview of the full-size image. Thumbnails can be used by themselves or inside of any element. If placed inside of an `ion-item`, the thumbnail will resize to fit the parent component. To position a thumbnail on the left or right side of an item, set the slot to `start` or `end`, respectively. +## Basic +import Basic from '@site/static/usage/thumbnail/basic/index.md'; + -## Usage - - - - - -```html - - - - - - - - - Item Thumbnail - -``` - - - - - - -```html - - - - - - - - - Item Thumbnail - -``` - - - - - - -```tsx -import React from 'react'; -import { IonThumbnail, IonItem, IonLabel, IonContent } from '@ionic/react'; - -export const ThumbnailExample: React.FC = () => ( - - - - - - - - - - Item Thumbnail - - -); -``` - - - - - - - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'thumbnail-example', - styleUrl: 'thumbnail-example.css' -}) -export class ThumbnailExample { - render() { - return [ - - - , - - - - - - Item Thumbnail - - ]; - } -} -``` - - - - - - - -```html - +import Item from '@site/static/usage/thumbnail/item/index.md'; - -``` +## Theming - +import Theming from '@site/static/usage/thumbnail/theming/index.md'; - + ## Properties @@ -184,4 +56,4 @@ export default defineComponent({ ## Slots - \ No newline at end of file + diff --git a/static/demos/api/skeleton-text/thumbnail.svg b/static/demos/api/skeleton-text/thumbnail.svg index dafcf4c1751..b12a43f92a9 100644 --- a/static/demos/api/skeleton-text/thumbnail.svg +++ b/static/demos/api/skeleton-text/thumbnail.svg @@ -1 +1,13 @@ - \ No newline at end of file + + + + + + + + + + + + + diff --git a/static/demos/api/thumbnail/thumbnail.svg b/static/demos/api/thumbnail/thumbnail.svg index dafcf4c1751..b12a43f92a9 100644 --- a/static/demos/api/thumbnail/thumbnail.svg +++ b/static/demos/api/thumbnail/thumbnail.svg @@ -1 +1,13 @@ - \ No newline at end of file + + + + + + + + + + + + + diff --git a/static/usage/thumbnail/basic/angular.md b/static/usage/thumbnail/basic/angular.md new file mode 100644 index 00000000000..6e388336952 --- /dev/null +++ b/static/usage/thumbnail/basic/angular.md @@ -0,0 +1,5 @@ +```html + + Silhouette of mountains + +``` diff --git a/static/usage/thumbnail/basic/demo.html b/static/usage/thumbnail/basic/demo.html new file mode 100644 index 00000000000..d5bdb920fe4 --- /dev/null +++ b/static/usage/thumbnail/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + + Thumbnail + + + + + + + + + + +
+ + Silhouette of mountains + +
+ + + + + diff --git a/static/usage/thumbnail/basic/index.md b/static/usage/thumbnail/basic/index.md new file mode 100644 index 00000000000..221786ddeee --- /dev/null +++ b/static/usage/thumbnail/basic/index.md @@ -0,0 +1,8 @@ +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 from './angular.md'; + + diff --git a/static/usage/thumbnail/basic/javascript.md b/static/usage/thumbnail/basic/javascript.md new file mode 100644 index 00000000000..6e388336952 --- /dev/null +++ b/static/usage/thumbnail/basic/javascript.md @@ -0,0 +1,5 @@ +```html + + Silhouette of mountains + +``` diff --git a/static/usage/thumbnail/basic/react.md b/static/usage/thumbnail/basic/react.md new file mode 100644 index 00000000000..cfd6d629ee8 --- /dev/null +++ b/static/usage/thumbnail/basic/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonThumbnail } from '@ionic/react'; + +function Example() { + return ( + <> + + Silhouette of mountains + + + ); +} +export default Example; +``` diff --git a/static/usage/thumbnail/basic/vue.md b/static/usage/thumbnail/basic/vue.md new file mode 100644 index 00000000000..8ef56dfa2c8 --- /dev/null +++ b/static/usage/thumbnail/basic/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/thumbnail/item/angular.md b/static/usage/thumbnail/item/angular.md new file mode 100644 index 00000000000..5b724820494 --- /dev/null +++ b/static/usage/thumbnail/item/angular.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of mountains + + Item Thumbnail + +``` diff --git a/static/usage/thumbnail/item/demo.html b/static/usage/thumbnail/item/demo.html new file mode 100644 index 00000000000..db7778adda6 --- /dev/null +++ b/static/usage/thumbnail/item/demo.html @@ -0,0 +1,30 @@ + + + + + + + Thumbnail + + + + + + + + + + +
+ + + Silhouette of mountains + + Item Thumbnail + +
+ + + + + diff --git a/static/usage/thumbnail/item/index.md b/static/usage/thumbnail/item/index.md new file mode 100644 index 00000000000..13b7272fa89 --- /dev/null +++ b/static/usage/thumbnail/item/index.md @@ -0,0 +1,8 @@ +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 from './angular.md'; + + diff --git a/static/usage/thumbnail/item/javascript.md b/static/usage/thumbnail/item/javascript.md new file mode 100644 index 00000000000..5b724820494 --- /dev/null +++ b/static/usage/thumbnail/item/javascript.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of mountains + + Item Thumbnail + +``` diff --git a/static/usage/thumbnail/item/react.md b/static/usage/thumbnail/item/react.md new file mode 100644 index 00000000000..6d1d3dafea3 --- /dev/null +++ b/static/usage/thumbnail/item/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonThumbnail } from '@ionic/react'; + +function Example() { + return ( + <> + + + Silhouette of mountains + + Item Thumbnail + + + ); +} +export default Example; +``` diff --git a/static/usage/thumbnail/item/vue.md b/static/usage/thumbnail/item/vue.md new file mode 100644 index 00000000000..a791dd166f1 --- /dev/null +++ b/static/usage/thumbnail/item/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/thumbnail/theming/angular.md b/static/usage/thumbnail/theming/angular.md new file mode 100644 index 00000000000..6e388336952 --- /dev/null +++ b/static/usage/thumbnail/theming/angular.md @@ -0,0 +1,5 @@ +```html + + Silhouette of mountains + +``` diff --git a/static/usage/thumbnail/theming/angular/example_component_css.md b/static/usage/thumbnail/theming/angular/example_component_css.md new file mode 100644 index 00000000000..605855deb77 --- /dev/null +++ b/static/usage/thumbnail/theming/angular/example_component_css.md @@ -0,0 +1,7 @@ + +```css +ion-thumbnail { + --size: 140px; + --border-radius: 14px; +} +``` diff --git a/static/usage/thumbnail/theming/angular/example_component_html.md b/static/usage/thumbnail/theming/angular/example_component_html.md new file mode 100644 index 00000000000..2e3429d7831 --- /dev/null +++ b/static/usage/thumbnail/theming/angular/example_component_html.md @@ -0,0 +1,6 @@ + +```html + + Silhouette of mountains + +``` diff --git a/static/usage/thumbnail/theming/demo.html b/static/usage/thumbnail/theming/demo.html new file mode 100644 index 00000000000..37b245dda91 --- /dev/null +++ b/static/usage/thumbnail/theming/demo.html @@ -0,0 +1,33 @@ + + + + + + + Thumbnail + + + + + + + + + + + +
+ + Silhouette of mountains + +
+ + + + + diff --git a/static/usage/thumbnail/theming/index.md b/static/usage/thumbnail/theming/index.md new file mode 100644 index 00000000000..8be9b0ddccc --- /dev/null +++ b/static/usage/thumbnail/theming/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import reactTSX from './react/main_tsx.md'; +import reactCSS from './react/main_css.md'; + +import vue from './vue.md'; + +import angularHTML from './angular/example_component_html.md'; +import angularCSS from './angular/example_component_css.md'; + + diff --git a/static/usage/thumbnail/theming/javascript.md b/static/usage/thumbnail/theming/javascript.md new file mode 100644 index 00000000000..05de3080310 --- /dev/null +++ b/static/usage/thumbnail/theming/javascript.md @@ -0,0 +1,12 @@ +```html + + + + Silhouette of mountains + +``` diff --git a/static/usage/thumbnail/theming/react/main_css.md b/static/usage/thumbnail/theming/react/main_css.md new file mode 100644 index 00000000000..74742dfe9f0 --- /dev/null +++ b/static/usage/thumbnail/theming/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-thumbnail { + --size: 140px; + --border-radius: 14px; +} +``` diff --git a/static/usage/thumbnail/theming/react/main_tsx.md b/static/usage/thumbnail/theming/react/main_tsx.md new file mode 100644 index 00000000000..c90a1cc2b68 --- /dev/null +++ b/static/usage/thumbnail/theming/react/main_tsx.md @@ -0,0 +1,18 @@ + +```tsx +import React from 'react'; +import { IonThumbnail } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Silhouette of mountains + + + ); +} +export default Example; +``` diff --git a/static/usage/thumbnail/theming/vue.md b/static/usage/thumbnail/theming/vue.md new file mode 100644 index 00000000000..e59d386f22a --- /dev/null +++ b/static/usage/thumbnail/theming/vue.md @@ -0,0 +1,23 @@ +```html + + + + + +```